function PlanVisitScreen({ onNavigate }) {
  const { Badge, Card, Eyebrow, SectionHeading, Button, Input, ServiceTimeCard } = window.GT;

  const steps = [
    { icon: "car-front", title: "Arriving", body: "Pull into the lot off Business Hwy. 13. Come as you are — there's no dress code, and you'll be warmly welcomed at the door." },
    { icon: "coffee", title: "Before service", body: "Grab a coffee, say hello, and let a greeter help you find your way. Bible study groups meet at 9:30, worship at 10:45." },
    { icon: "users", title: "For your family", body: "Children are welcome in our gatherings. Ask a greeter about what's available for kids on the day you visit." },
    { icon: "heart-handshake", title: "After service", body: "We'd love to meet you. Stick around, ask questions, and let us pray with you — no pressure, just genuine community." },
  ];

  return (
    <div>
      {/* Header */}
      <div style={{ position: "relative", background: "linear-gradient(150deg, #4E606E 0%, #3C4C59 55%, #212B33 100%)", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(50% 70% at 85% 15%, rgba(168,202,85,0.15), transparent 60%)" }}></div>
        <div style={{ position: "relative", maxWidth: "var(--container-xl)", margin: "0 auto", padding: "var(--space-10) var(--gutter)" }}>
          <Eyebrow tone="light">Plan Your Visit</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-display-2)", fontWeight: 600, color: "var(--white)", margin: "var(--space-2) 0 0", maxWidth: "20ch", lineHeight: 1.08 }}>
            We saved you a seat.
          </h1>
          <p style={{ color: "var(--slate-300)", fontSize: "var(--text-lead)", maxWidth: "40rem", margin: "var(--space-4) 0 0" }}>
            However you found us, we're glad you're here. Here's everything you need to know before
            your first Sunday at Grace &amp; Truth.
          </p>
        </div>
      </div>

      {/* When & where */}
      <Section bg="page">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)", alignItems: "start" }} className="two-col">
          <div>
            <SectionHeading eyebrow="When We Gather" title="Sunday & through the week" rule />
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", marginTop: "var(--space-5)" }}>
              <ServiceTimeCard icon={<i data-lucide="book-open"></i>} title="Sunday Morning Bible Study" schedule="Sundays · 9:30 a.m." tone="soft" />
              <ServiceTimeCard icon={<i data-lucide="church"></i>} title="Sunday Worship Service" schedule="Sundays · 10:45 a.m." tone="soft" />
              <ServiceTimeCard icon={<i data-lucide="hand"></i>} title="Prayer Gathering" schedule="Wednesdays · 6:00 p.m." tone="soft" />
            </div>
          </div>
          <div>
            <SectionHeading eyebrow="Where to Find Us" title="In the heart of Branson West" rule />
            <Card padding="none" style={{ marginTop: "var(--space-5)", overflow: "hidden" }}>
              <Photo src="sign.png" label="Grace & Truth Church" ratio="16 / 9" tone="slate" rounded="none" />
              <div style={{ padding: "var(--space-5)", display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
                <div style={{ display: "flex", gap: "var(--space-3)", alignItems: "flex-start" }}>
                  <i data-lucide="map-pin" style={{ width: 20, height: 20, color: "var(--accent)", flex: "none", marginTop: 2 }}></i>
                  <div style={{ fontSize: "var(--text-sm)", lineHeight: 1.6, color: "var(--text-body)" }}>
                    18942 Business Hwy. 13, Suite H<br />Branson West, MO 65737
                  </div>
                </div>
                <div style={{ display: "flex", gap: "var(--space-3)", alignItems: "center" }}>
                  <i data-lucide="mail" style={{ width: 20, height: 20, color: "var(--accent)", flex: "none" }}></i>
                  <a href="mailto:GraceAndTruth.Office@gmail.com" style={{ fontSize: "var(--text-sm)", color: "var(--text-accent)" }}>GraceAndTruth.Office@gmail.com</a>
                </div>
                <Button variant="secondary" size="sm" as="a" href="https://maps.google.com/?q=Grace+and+Truth+Church+Branson+West+MO" target="_blank" rel="noopener" leadingIcon={<i data-lucide="navigation" style={{ width: 16, height: 16 }}></i>} style={{ alignSelf: "flex-start", marginTop: "var(--space-1)" }}>
                  Get Directions
                </Button>
              </div>
            </Card>
          </div>
        </div>
      </Section>

      {/* What to expect */}
      <Section bg="sunken">
        <SectionHeading align="center" eyebrow="What to Expect" title="Your first Sunday, step by step" intro="No surprises, no pressure. Here's how a typical morning unfolds." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-5)", marginTop: "var(--space-7)" }} className="beliefs-grid">
          {steps.map((s, i) => (
            <Card key={s.title} padding="lg">
              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 48, height: 48, borderRadius: "var(--radius-md)", background: "var(--blue-100)", color: "var(--accent)", marginBottom: "var(--space-3)" }}>
                <i data-lucide={s.icon} style={{ width: 24, height: 24 }}></i>
              </span>
              <div style={{ fontFamily: "var(--font-label)", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 4 }}>Step 0{i + 1}</div>
              <h3 style={{ margin: "0 0 var(--space-2)", fontSize: "var(--text-h4)" }}>{s.title}</h3>
              <p style={{ margin: 0, fontSize: "var(--text-sm)", color: "var(--text-body)", lineHeight: 1.6 }}>{s.body}</p>
            </Card>
          ))}
        </div>
      </Section>

      {/* Plan form */}
      <Section bg="page" id="contact">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)", alignItems: "start" }} className="two-col">
          <div>
            <SectionHeading eyebrow="Let Us Know You're Coming" title="Plan a visit" intro="Tell us you're coming and we'll have someone ready to welcome you personally. Have a question or a prayer request? Send it along — we'd be honored to pray with you." />
            <div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-5)", flexWrap: "wrap" }}>
              <Badge tone="teal">No pressure</Badge>
              <Badge tone="leaf">Come as you are</Badge>
              <Badge tone="lime">All are welcome</Badge>
            </div>
          </div>
          <Card padding="lg" topRule>
            <form style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }} onSubmit={(e) => e.preventDefault()}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
                <Input label="Name" placeholder="Your name" required />
                <Input label="Email" type="email" placeholder="you@example.com" required />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
                <Input label="Phone" type="tel" placeholder="(417) 555-0100" />
                <Input label="When do you plan to visit?" placeholder="This Sunday" />
              </div>
              <Input label="Anything we can help with?" as="textarea" placeholder="Questions, prayer requests, or how we can welcome you." />
              <Button variant="primary" type="submit" style={{ alignSelf: "flex-start" }}>Let Us Know</Button>
            </form>
          </Card>
        </div>
      </Section>
    </div>
  );
}

window.PlanVisitScreen = PlanVisitScreen;