const { Button: GBtn, Input: GInput, Mark: GMark } = window.PYPAAluvaCentreDesignSystem_9d12c1;

function ContactRow({ label, value, href }) {
  const inner = <span style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(20px,2.2vw,26px)", color: "var(--c-ink)", letterSpacing: "-.01em" }}>{value}</span>;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, padding: "22px 0", borderTop: "1px solid var(--c-rule)" }}>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--c-ink-faint)" }}>{label}</span>
      {href ? <a href={href} style={{ borderBottom: "1px solid var(--c-rule-strong)", width: "fit-content", paddingBottom: 2 }}>{inner}</a> : inner}
    </div>
  );
}

function GetInvolved({ go }) {
  const S = window.SITE;
  const [sent, setSent] = React.useState(false);
  return (
    <div>
      <window.PageHero eyebrow="Get involved" title="The first step is simple: just come." lede={`We meet every ${S.settings.meetDay} at ${S.settings.meetTime}. You don't need to know anyone, and you don't need to sign up — but if it's easier to say hello first, here's how.`} />

      {/* First time */}
      <window.Section tone="linen" pad="md">
        <window.Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,5vw,72px)", alignItems: "start" }} className="pypa-split">
            <window.Reveal>
              <window.Eyebrow style={{ marginBottom: 18 }}>Your first time</window.Eyebrow>
              <window.Heading style={{ fontSize: "clamp(24px,2.8vw,34px)" }}>What to expect.</window.Heading>
              <ul style={{ listStyle: "none", padding: 0, margin: "22px 0 0", display: "flex", flexDirection: "column", gap: 16 }}>
                {[
                  ["Come as you are.", "There's no dress code and no expectation. Bring a friend or come on your own."],
                  ["You'll be welcomed.", "Someone will look out for you — you won't be left standing alone."],
                  ["Worship, the Word, and time together.", "A gathering is usually an hour or two, unhurried."],
                ].map(([t, d]) => (
                  <li key={t} style={{ display: "flex", gap: 14 }}>
                    <span aria-hidden="true" style={{ marginTop: 9, width: 6, height: 6, borderRadius: "50%", background: "var(--c-sage)", flex: "none" }} />
                    <span><strong style={{ fontWeight: 600, color: "var(--c-ink)" }}>{t}</strong> <span style={{ color: "var(--c-ink-soft)" }}>{d}</span></span>
                  </li>
                ))}
              </ul>
              <div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
                <GBtn href={S.settings.whatsapp}>Message us on WhatsApp</GBtn>
                <GBtn variant="secondary" href={S.settings.instagram}>Instagram</GBtn>
              </div>
            </window.Reveal>
            <window.Reveal delay={90}><window.Photo ratio="4 / 5" label="Welcome photograph" note="Newcomers being welcomed" /></window.Reveal>
          </div>
        </window.Container>
      </window.Section>

      {/* Contact + note */}
      <window.Section tone="paper" pad="md">
        <window.Container>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px,6vw,88px)", alignItems: "start" }} className="pypa-split">
            <window.Reveal>
              <window.Eyebrow style={{ marginBottom: 8 }}>Reach us</window.Eyebrow>
              <div style={{ marginTop: 20 }}>
                <ContactRow label="Where" value={S.settings.area} href={S.settings.mapUrl} />
                <ContactRow label="When" value={`${S.settings.meetDay}s · ${S.settings.meetTime}`} />
                <ContactRow label="Email" value={S.settings.email} href={`mailto:${S.settings.email}`} />
                <ContactRow label="WhatsApp" value="Message us" href={S.settings.whatsapp} />
              </div>
              <p style={{ fontSize: 13, color: "var(--c-ink-faint)", marginTop: 20 }}>Contact details are placeholders until confirmed.</p>
            </window.Reveal>

            <window.Reveal delay={90}>
              <div style={{ border: "1px solid var(--c-rule)", background: "var(--c-paper-raised)", padding: "clamp(24px,3vw,40px)" }}>
                <window.Eyebrow style={{ marginBottom: 20 }}>Or drop us a note</window.Eyebrow>
                {sent ? (
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 14, padding: "20px 0" }}>
                    <GMark size={40} tone="sage" />
                    <p style={{ fontSize: 17, color: "var(--c-ink-soft)", margin: 0, lineHeight: 1.6 }}>Thank you — we'll be in touch. See you {S.settings.meetDay}.</p>
                  </div>
                ) : (
                  <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                    <GInput label="Your name" placeholder="First name" required />
                    <GInput label="How to reach you" type="tel" placeholder="Phone or email" required />
                    <GInput label="Anything you'd like to ask" multiline rows={3} placeholder="Optional" />
                    <GBtn variant="accent" style={{ marginTop: 4 }}>Send</GBtn>
                    <p style={{ fontSize: 12.5, color: "var(--c-ink-faint)", margin: 0 }}>This form is a demonstration — wire it to WhatsApp or a form service at launch.</p>
                  </form>
                )}
              </div>
            </window.Reveal>
          </div>
        </window.Container>
      </window.Section>
    </div>
  );
}
window.GetInvolved = GetInvolved;