/* Contact - Denice DeVries */
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 note personally, and I'll write you back soon. What you share stays between us — you have my word on that.</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 }}>
                  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 }}>
                  Whatever you write, I'll meet you there. I am confidential with the people I work with, and with dear friends — your story will be treated as the sacred thing it is.
                </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" />
                <Field label="What brings you here?" placeholder="Choose one" select options={["Grieving the loss of a spouse or parent", "A season of disappointment or drift", "Interested in 1:1 coaching", "The grief small group", "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 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(--terracotta)", marginBottom: 14 }}>Reach Denice</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              {[["✉️  Email", "restoringpath@gmail.com"], ["📞  Phone / text", "(507) 440-8258"], ["📍  Based in", "Minnesota · Remote across the U.S."], ["⏰  Response time", "Personally · usually within a day or two"], ["📱  Instagram", "@devries.denice"]].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 }}>
              "You will seek me and find me, when you seek me with all your heart."
              <div className="smallcaps" style={{ color: "var(--terracotta)", marginTop: 10, fontStyle: "normal" }}>Jeremiah 29:13</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 getting-acquainted call", d: "A free, no-pressure 30 minutes. We'll visit, you'll share as much or as little as you want, and together we'll see whether Restoring Paths is the right fit. You don't need answers to book it — only a little honesty.", href: BOOKING_URL, cta: "Book your call" },
    { eyebrow: "📱 Get to know me first", t: "Follow along on Instagram", d: "Not ready to reach out yet? That's just fine. Follow along at @devries.denice — a quieter way to get a feel for who I am and how I walk with people before you ever say hello.", href: "https://www.instagram.com/devries.denice/", cta: "Follow on Instagram" },
    { eyebrow: "✉️ Prefer email", t: "Write me directly", d: "Some things are easier to type at your own kitchen table, at your own pace. Email me at restoringpath@gmail.com — I read every note myself, and what you share stays between us.", href: "mailto:restoringpath@gmail.com", cta: "Email Denice" },
  ];
  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 is its own small act of courage. Take whichever doorway 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 }}>{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 carry this"
          italic="by yourself."
          subtitle="Maybe you've been holding it together for everyone else. Maybe the people around you mean well but can't comprehend what you're feeling. If that's where you are, this is a good place to say so. Send a note below — I read every one myself, and I'll answer personally."
          verse="He who dwells in the shelter of the Most High will abide in the shadow of the Almighty."
          verseRef="Psalm 91:1"
        />
        <Form />
        <AltCards />
      </main>
      <Footer />
      <PaletteTweaksPanel />
    </>
  );
}

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