/* Contact — Kevin Wood · Head to Heart */
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 for reaching out.</h3>
                <p className="serif-italic" style={{ fontSize: 18, color: "var(--walnut-soft)" }}>I read every note personally — usually within 24 hours. I'll write you back. No bots. No form letters. Just me.</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 }}>
                  I'll meet you there. Your privacy matters. Your story is sacred. I will never share either with anyone.
                </p>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
                  <Field label="First name" placeholder="Kim" />
                  <Field label="Last name" placeholder="Wood" />
                </div>
                <Field label="Email" placeholder="you@email.com" />
                <Field label="What brings you here?" placeholder="Choose one" select options={["Question about a program", "Considering 1:1 coaching", "Connection Circle waitlist", "Self-paced course question", "Press, speaking, or partnership", "Something else"]} />
                <Field label="Anything you'd like me to know" textarea placeholder="As much or as little as you want. Nothing you say will surprise me." />
                <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(--terracotta)", marginBottom: 14 }}>Reach Kevin</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              {[["✉️  Email", "kevin.wood2068@gmail.com"], ["📞  Phone", "(207) 314-3478"], ["📍  Based in", "Maine · Remote across the U.S."], ["⏰  Response time", "Within 24 hrs · personally · no bots"], ["📱  Instagram", "@kjwood68"], ["🏷️  Business", "Head to Heart LLC"]].map(([t, v]) => (
                <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>
                  <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 }}>
              "For man looks at the outward appearance, but the Lord looks at the heart."
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 10, fontStyle: "normal" }}>1 Samuel 16:7b</div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Field({ label, placeholder, textarea, select, options }) {
  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)" }}>{label}</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="text" placeholder={placeholder} style={inputStyle} />}
    </div>
  );
}

function AltCards() {
  const cards = [
    { eyebrow: "📅 Ready to talk", t: "Book a heart-aligned call", d: "A free, no-pressure 30 minutes. We'll talk about your story, the season you're in, and whether walking together is the right fit. You don't need to have answers — only a willingness to be honest.", href: BOOKING_URL, cta: "Book your call" },
    { eyebrow: "📱 Follow along", t: "Connect on Instagram", d: "Short reflections, heart-aligned encouragement, and the language of grace-rooted living. A good place to feel the voice before reaching out.", href: "https://www.instagram.com/kjwood68/", cta: "Follow on Instagram" },
    { eyebrow: "✉️  Just want to write", t: "Email me directly", d: "Sometimes a quick note is the easier first step. Send me an email and I'll respond personally — usually within 24 hours. No team. No bots.", href: "mailto:kevin.wood2068@gmail.com", cta: "Email Kevin" },
  ];
  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 to write?{" "}
          <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 doorways for the person who isn't ready for a form yet — but who can't stay where they are either.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {cards.map((c, i) => {
            const external = /^https?:\/\//.test(c.href) || /^mailto:/.test(c.href);
            return (
              <a
                key={i}
                href={c.href}
                {...(external && /^https?:\/\//.test(c.href) ? { 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 }}>{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 have to figure"
          italic="this out alone."
          subtitle="I know what it's like to carry the loop in silence — to be the one in the room who looks like they have it together while something inside is quietly worn out. If that's where you are right now, this is the right place to say so. Send a message below. I read every one personally — usually within 24 hours."
          verse="For man looks at the outward appearance, but the Lord looks at the heart."
          verseRef="1 Samuel 16:7b"
        />
        <Form />
        <AltCards />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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