/* Contact - William Sherry · River Song Heart and Spirit */
const { useState } = React;

function Form() {
  const [sent, setSent] = useState(false);
  return (
    <section className="section" style={{ background: "var(--cream)", paddingTop: 40 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "start" }}>
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ background: "var(--cream-2)", padding: "44px clamp(28px, 4vw, 56px)" }}>
            {sent ? (
              <div style={{ padding: "60px 0", textAlign: "center" }}>
                <CrossMark size={28} color="var(--terracotta)" />
                <h3 className="display" style={{ fontSize: 32, fontWeight: 500, color: "var(--walnut)", marginTop: 24, marginBottom: 14 }}>Thank you.</h3>
                <p className="serif-italic" style={{ fontSize: 18, color: "var(--walnut-soft)" }}>I read every message myself and I'll write you back personally. No bots and no form letters. Whatever you shared, I'll be praying over it before I reply.</p>
              </div>
            ) : (
              <>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 14 }}>✦ Send a message</div>
                <h2 className="display" style={{ fontSize: 36, fontWeight: 500, color: "var(--walnut)", lineHeight: 1.05, marginBottom: 12 }}>
                  You don't need the right words.{" "}
                  <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Just start somewhere.</span>
                </h2>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--walnut-soft)", marginBottom: 32 }}>
                  Everything you write stays confidential, and nothing you share will be met with judgment. "I don't know why, but I just feel lost" is a perfectly good place to begin.
                </p>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
                  <Field label="First name" placeholder="Your first name" />
                  <Field label="Last name" placeholder="Your last name" />
                </div>
                <Field label="Email" placeholder="you@email.com" type="email" />
                <Field label="What brings you here?" placeholder="Choose one" select options={["Question about 1:1 coaching", "Learning to Talk Again · couples interest list", "Monday Morning · notify me when it opens", "A prayer request", "Something else"]} />
                <Field label="Anything you'd like me to know" textarea placeholder="As much or as little as you want. There's no wrong way to say it." />
                <button type="submit" className="btn btn-primary" style={{ marginTop: 12 }}>Send my message <span className="arrow">→</span></button>
              </>
            )}
          </form>
          <aside style={{ background: "var(--walnut)", color: "var(--cream)", padding: "40px 36px" }}>
            <div className="smallcaps" style={{ color: "var(--sage-soft)", marginBottom: 14 }}>Reach William</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              {[["✉️  Email", EMAIL], ["📍  Coaching", "One-on-one · phone or video · wherever you are"], ["⏰  Response time", "Within 24–48 hrs · personally · no bots"], ["🌊  Practice", "River Song Heart and Spirit"]].map(([t, v]) => (
                <div key={t} style={{ paddingBottom: 18, borderBottom: "1px solid rgba(239,241,232,0.15)" }}>
                  <div className="smallcaps" style={{ color: "rgba(239,241,232,0.55)", marginBottom: 6, fontSize: 9 }}>{t}</div>
                  <div className="grotesk" style={{ fontSize: 15.5, color: "var(--cream)", overflowWrap: "anywhere" }}>{v}</div>
                </div>
              ))}
            </div>
            <div className="serif-italic" style={{ marginTop: 32, fontSize: 16, lineHeight: 1.5, color: "rgba(239,241,232,0.85)", fontWeight: 300 }}>
              "Do not grieve, for the joy of the LORD is your strength."
              <div className="smallcaps" style={{ color: "var(--sage-soft)", marginTop: 10, fontStyle: "normal" }}>Nehemiah 8:10</div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Field({ label, placeholder, textarea, select, options, type = "text" }) {
  const inputStyle = { width: "100%", padding: "14px 16px", background: "var(--cream)", border: "1px solid var(--rule-strong)", borderRadius: 4, fontSize: 15, color: "var(--walnut)", marginTop: 6, fontFamily: "'Source Serif 4', Georgia, serif", fontWeight: 400, textTransform: "none", letterSpacing: "normal" };
  return (
    <div style={{ marginBottom: 18 }}>
      <label className="smallcaps" style={{ color: "var(--walnut-soft)", display: "block" }}>
        {label}
        {textarea ? <textarea rows={5} placeholder={placeholder} style={{ ...inputStyle, resize: "vertical" }} /> :
         select ? <select style={{ ...inputStyle }} defaultValue=""><option value="" disabled>{placeholder}</option>{options.map(o => <option key={o}>{o}</option>)}</select> :
         <input type={type} placeholder={placeholder} style={{ ...inputStyle }} />}
      </label>
    </div>
  );
}

function AltCards() {
  const cards = [
    { eyebrow: "📅 Ready to talk", t: "Book a Riverside Chat", d: "A free, no-pressure 30 minutes. You talk, I listen, and we figure out together whether River Song is the right next step. You don't need answers. Honesty is plenty.", href: BOOKING_URL, cta: "Book your call" },
    { eyebrow: "✉️ Prefer to write", t: "Email me directly", d: `Some things are easier to type late on a Sunday night than to say out loud. Write me at ${EMAIL}, as much or as little as you like. I read every message myself and reply personally.`, href: `mailto:${EMAIL}`, cta: "Email William" },
    { eyebrow: "📖 Not ready yet", t: "Read my story first", d: "Before you trust me with your story, you should know mine: the college years I ran from God, ten seconds on the four-lane, and a marriage that nearly ended and is now nearly fifty.", href: "about.html", cta: "Read the story" },
  ];
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="container">
        <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 16 }}>✦ Other ways to connect</div>
        <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", color: "var(--walnut)", lineHeight: 0.98, fontWeight: 500, marginBottom: 20, maxWidth: 720 }}>
          Not ready for a form?{" "}
          <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>Start here.</span>
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720, marginBottom: 48 }}>
          Three easy ways in, for the one who isn't ready to fill anything out yet but is tired of carrying this alone.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {cards.map((c, i) => {
            const external = /^https?:\/\//.test(c.href) || c.href.startsWith("mailto:");
            return (
              <a
                key={i}
                href={c.href}
                {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                style={{ background: "var(--cream)", padding: "32px 32px 28px", display: "flex", flexDirection: "column", border: "1px solid var(--rule)" }}
              >
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 18 }}>{c.eyebrow}</div>
                <h3 className="display" style={{ fontSize: 26, fontWeight: 500, color: "var(--walnut)", marginBottom: 10 }}>{c.t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--walnut-soft)", marginBottom: 26, overflowWrap: "anywhere" }}>{c.d}</p>
                <span className="grotesk" style={{ marginTop: "auto", fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta)" }}>{c.cta} →</span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="contact" />
      <main>
        <PageHero
          eyebrow="Reach out"
          title="Tired of being tired?"
          italic="Start here."
          subtitle="Emotionally tired, physically tired, and not sure why. If that's you, you don't have to have it figured out before you write. Send a message below. I read every one myself, and I really do like hearing from people."
          verse="Come to me, all you who are weary and burdened, and I will give you rest."
          verseRef="Matthew 11:28"
        />
        <Form />
        <AltCards />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);