/* Contact — Brenda McPherson · Free to Thrive Life Coaching */
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" }}>
                <StarMark 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 note myself, and I'll write back soon. What you share is treated with great care and discretion.</p>
              </div>
            ) : (
              <>
                <div className="smallcaps" style={{ color: "var(--terracotta)", marginBottom: 14 }}>✦ Send a note</div>
                <h2 className="display" style={{ fontSize: 36, fontWeight: 500, color: "var(--walnut)", lineHeight: 1.05, marginBottom: 12 }}>
                  Start wherever you are.{" "}
                  <span style={{ fontStyle: "italic", fontFamily: "'Source Serif 4', serif", fontWeight: 300, color: "var(--terracotta)" }}>A few words is enough.</span>
                </h2>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--walnut-soft)", marginBottom: 32 }}>
                  You don't need to explain everything, and you never have to share details you're not ready to share. Whatever you write, I'll meet you there.
                </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" type="email" placeholder="you@email.com" />
                <Field label="What brings you here?" placeholder="Choose one" select options={["Healing from childhood wounds", "Feeling stuck after years of trying", "My body is asking for care", "Interested in 1:1 coaching", "The Still Waters Circle", "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 begin." />
                <button type="submit" className="btn btn-primary" style={{ marginTop: 12 }}>Send my note <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 Brenda</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              {[
                ["Email", EMAIL, `mailto:${EMAIL}`],
                ["Current coaching clients", "Book your next 1:1 session", COACHING_BOOKING_URL],
                ["Based in", "Leesburg, Alabama · meeting online", null],
                ["Response time", "Personally · usually within a day or two", null],
              ].map(([t, v, href]) => (
                <div key={t} style={{ paddingBottom: 18, borderBottom: "1px solid rgba(238,241,245,0.15)" }}>
                  <div className="smallcaps" style={{ color: "rgba(238,241,245,0.55)", marginBottom: 6, fontSize: 9 }}>{t}</div>
                  {href
                    ? <a href={href} className="grotesk" style={{ fontSize: 15.5, color: "var(--cream)", wordBreak: "break-word" }}>{v}</a>
                    : <div className="grotesk" style={{ fontSize: 15.5, color: "var(--cream)" }}>{v}</div>}
                </div>
              ))}
            </div>
            <div className="serif-italic" style={{ marginTop: 32, fontSize: 16, lineHeight: 1.5, color: "rgba(238,241,245,0.85)", fontWeight: 300 }}>
              "Trust in the Lord with all your heart, and lean not on your own understanding."
              <div className="smallcaps" style={{ color: "var(--sage-soft)", marginTop: 10, fontStyle: "normal" }}>Proverbs 3:5</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: "inherit" };
  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", textTransform: "none", letterSpacing: "normal", fontWeight: 400 }} /> :
         select ? <select style={{ ...inputStyle, textTransform: "none", letterSpacing: "normal", fontWeight: 400 }} defaultValue=""><option value="" disabled>{placeholder}</option>{options.map(o => <option key={o}>{o}</option>)}</select> :
         <input type={type} placeholder={placeholder} style={{ ...inputStyle, textTransform: "none", letterSpacing: "normal", fontWeight: 400 }} />}
      </label>
    </div>
  );
}

function AltCards() {
  const cards = [
    { eyebrow: "Ready to talk", t: "Book a free discovery session", d: "A gentle, no-pressure conversation. You'll share as much or as little as you like, and together we'll see whether coaching is the right next step. You don't need answers to book it.", href: BOOKING_URL, cta: "Book your session" },
    { eyebrow: "Get to know me first", t: "Read the blog", d: "Not ready to reach out yet? That's perfectly okay. My blog is a quieter way to get to know me and how I think about healing, faith, and the long road in between.", href: BLOG_URL, cta: "Visit the blog" },
    { eyebrow: "Prefer email", t: "Write me directly", d: `Some things are easier to write at your own kitchen table, in your own time. Email me at ${EMAIL}. I read every note myself.`, href: `mailto:${EMAIL}`, cta: "Email Brenda" },
  ];
  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 gently.</span>
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--walnut-soft)", maxWidth: 720, marginBottom: 48 }}>
          Reaching out takes courage. Choose whichever way feels easiest today.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {cards.map((c, i) => {
            const external = /^https?:\/\//.test(c.href);
            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, display: "flex", alignItems: "center", gap: 10 }}>
                  <StarMark size={9} color="var(--terracotta)" /> {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, wordBreak: "break-word" }}>{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="You don't need"
          italic="the right words."
          subtitle="Maybe you've never said any of this out loud. That's okay. Send a note below. I read every one myself, I'll answer personally, and what you share is treated with great care and discretion."
          verse="Though I walk through the valley of the shadow of death, I will fear no evil; for You are with me."
          verseRef="Psalm 23:4"
        />
        <Form />
        <AltCards />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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