// Homepage sections: Book, Newsletter, About, Coaching, Footer.
const { useState: useStateR, useEffect: useEffectR } = React;

function Book() {
  return (
    <section id="writing" style={{
      background: "var(--paper)", color: "#0c0c0e",
      borderTop: "1px solid rgba(12,12,14,.08)", borderBottom: "1px solid rgba(12,12,14,.08)",
      position: "relative", overflow: "hidden",
    }}>
      <div aria-hidden style={{ position: "absolute", inset: 0, opacity: .6, background: "radial-gradient(900px 600px at 20% 40%, rgba(201,169,97,.10), transparent 60%), radial-gradient(800px 600px at 85% 80%, rgba(122,59,42,.06), transparent 60%)" }} />
      <div className="container book-pad" style={{ position: "relative", padding: "140px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center" }} className="book-grid">
          <BookCover />
          <BookCopy />
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .book-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }
        @media (max-width: 560px) {
          .book-pad { padding: 64px 20px !important; }
          .book-grid { gap: 32px !important; }
          .book-stats { gap: 24px !important; margin-bottom: 28px !important; }
          .book-stats .serif { font-size: 28px !important; }
          .book-quote { margin-top: 32px !important; padding-left: 18px !important; }
          .book-quote p { font-size: 16px !important; }
        }
      `}</style>
    </section>
  );
}

function BookCover() {
  return (
    <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
      <div style={{ position: "relative", width: "min(420px, 100%)", aspectRatio: "2 / 3" }}>
        <div aria-hidden style={{ position: "absolute", inset: "8% -6% -10% 6%", background: "radial-gradient(60% 50% at 50% 100%, rgba(201,169,97,.35), transparent 70%)", filter: "blur(20px)" }} />
        <div style={{
          position: "absolute", inset: 0,
          boxShadow: "0 40px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(201,169,97,.18)",
          transform: "rotate(-2deg)",
          transition: "transform .35s cubic-bezier(.2,.8,.2,1)",
        }}
          onMouseEnter={(e) => e.currentTarget.style.transform = "rotate(0deg) translateY(-6px)"}
          onMouseLeave={(e) => e.currentTarget.style.transform = "rotate(-2deg)"}
        >
          <img src="assets/just-live-it-cover.png" alt="Just Live It — book cover"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
      </div>
    </div>
  );
}

function BookCopy() {
  return (
    <div>
      <span className="mono" style={{ fontSize: 11, letterSpacing: ".28em", color: "#7a3b2a" }}>THE BOOK · BESTSELLER</span>
      <h2 className="serif" style={{ fontSize: "clamp(36px,5vw,68px)", lineHeight: 1.02, letterSpacing: "-0.02em", fontWeight: 400, margin: "24px 0 18px", color: "#0c0c0e" }}>
        Just Live It.
      </h2>
      <p className="serif" style={{ fontSize: "clamp(18px,1.6vw,22px)", lineHeight: 1.35, color: "#7a3b2a", fontStyle: "italic", fontWeight: 300, margin: "0 0 28px", maxWidth: 520 }}>
        How to optimize your health, master discipline, and rise above it all.
      </p>
      <p style={{ fontSize: 16, lineHeight: 1.7, color: "#2b2b30", maxWidth: 560, margin: "0 0 20px" }}>
        Twenty-five years of coaching Olympia-caliber athletes, distilled into the playbook George wishes every
        lifter had at twenty-five. Training, nutrition, bloodwork, and the quiet discipline that separates the
        people who finish from the people who almost do.
      </p>
      <p style={{ fontSize: 16, lineHeight: 1.7, color: "#2b2b30", maxWidth: 560, margin: "0 0 40px" }}>
        Written for the serious athlete, accessible to anyone who wants their body to last.
      </p>
      <div className="book-stats" style={{ display: "flex", gap: 48, flexWrap: "wrap", marginBottom: 40 }}>
        <div>
          <div className="serif" style={{ fontSize: 36, lineHeight: 1, fontWeight: 400, color: "#0c0c0e" }}>4.5<span style={{ color: "#3b3b40", fontSize: 18 }}>/5</span></div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: ".22em", color: "#3b3b40", marginTop: 8 }}>AMAZON RATING</div>
        </div>
        <div>
          <div className="serif" style={{ fontSize: 36, lineHeight: 1, fontWeight: 400, color: "#0c0c0e" }}>312</div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: ".22em", color: "#3b3b40", marginTop: 8 }}>PAGES</div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <a href="https://www.amazon.com/Just-Live-Optimize-Health-Discipline/dp/B0CZY47SMJ/ref=tmm_pap_swatch_0" target="_blank" rel="noreferrer"
          style={{
            padding: "18px 26px", letterSpacing: ".18em", fontSize: 12, textTransform: "uppercase",
            background: "#0c0c0e", color: "#f2eee4", fontWeight: 600,
            display: "inline-flex", alignItems: "center", gap: 10,
          }}>
          Order on Amazon
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7h12M9 3l4 4-4 4" stroke="#f2eee4" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </a>
        <a href="https://www.amazon.com/Just-Live-Optimize-Health-Discipline-ebook/dp/B0CZYNCQ3V/ref=tmm_kin_swatch_0" target="_blank" rel="noreferrer"
          style={{
            padding: "18px 22px", letterSpacing: ".18em", fontSize: 12, textTransform: "uppercase",
            border: "1px solid rgba(12,12,14,.25)", color: "#0c0c0e",
          }}>Kindle</a>
      </div>
      <blockquote className="book-quote" style={{ margin: "48px 0 0", paddingLeft: 24, borderLeft: "1px solid #7a3b2a" }}>
        <p className="serif" style={{ fontSize: 18, lineHeight: 1.5, fontStyle: "italic", color: "#0c0c0e", margin: 0, maxWidth: 540 }}>
          “George is the coach every pro calls when the lights come on. This book is the closest most of us
          will get to standing next to him backstage.”
        </p>
        <footer className="mono" style={{ fontSize: 11, letterSpacing: ".22em", color: "#3b3b40", marginTop: 16 }}>— KAI GREENE · 3× MR. OLYMPIA RUNNER-UP</footer>
      </blockquote>
    </div>
  );
}

// ─────────────── Newsletter ───────────────
function Newsletter() {
  const [email, setEmail] = useStateR("");
  const [state, setState] = useStateR({ status: "idle", msg: "" });
  const submit = (e) => {
    e.preventDefault();
    const v = email.trim();
    if (!v) return setState({ status: "err", msg: "Please enter an email address." });
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) return setState({ status: "err", msg: "That email doesn’t look right." });
    setState({ status: "ok", msg: "You’re on the list. Check your inbox for a confirmation." });
  };
  return (
    <section id="newsletter" style={{
      background: "linear-gradient(180deg,#05060a 0%,#0c0d12 60%,#050508 100%)",
      borderTop: "1px solid var(--line)",
      position: "relative", overflow: "hidden",
    }}>
      <div aria-hidden style={{ position: "absolute", inset: 0, opacity: .35, background: "radial-gradient(800px 500px at 20% 30%, rgba(201,169,97,.18), transparent 60%), radial-gradient(800px 500px at 80% 70%, rgba(122,59,42,.18), transparent 60%)" }} />
      <div className="container news-grid" style={{ position: "relative", padding: "140px 32px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div className="news-grid-l">
          <span className="mono" style={{ fontSize: 11, letterSpacing: ".28em", color: "var(--gold)" }}>THE FARAH LETTER</span>
          <h2 className="serif" style={{ fontSize: "clamp(36px,4.8vw,64px)", lineHeight: 1.04, letterSpacing: "-0.01em", fontWeight: 400, margin: "24px 0 24px" }}>
            One letter. Sunday morning.<br /><em style={{ color: "var(--gold-2)", fontWeight: 300 }}>Training, nutrition, a little medicine.</em>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--soft)", maxWidth: 520, margin: 0 }}>
            Short enough to finish with coffee. Long enough to change something in the gym Monday.
            Free — unsubscribe any time.
          </p>
        </div>
        <form onSubmit={submit} className="news-form" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <label className="mono" style={{ fontSize: 11, letterSpacing: ".22em", color: "var(--gold)" }}>EMAIL ADDRESS</label>
          <div style={{ position: "relative" }}>
            <input
              type="email" value={email} onChange={(e) => { setEmail(e.target.value); if (state.status !== "idle") setState({ status: "idle", msg: "" }); }}
              placeholder="you@domain.com"
              style={{
                width: "100%", background: "transparent", border: 0, borderBottom: "1px solid var(--line-strong)",
                padding: "18px 0", fontSize: 20, color: "var(--bone)", outline: "none",
                fontFamily: "Fraunces, serif", letterSpacing: "-0.005em",
              }}
            />
          </div>
          <button type="submit"
            style={{
              marginTop: 12, padding: "20px 24px", letterSpacing: ".18em", fontSize: 12, textTransform: "uppercase",
              background: "var(--gold)", color: "#0b0b0d", fontWeight: 600, alignSelf: "flex-start",
              display: "inline-flex", gap: 12, alignItems: "center",
            }}>
            Subscribe — it’s free
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7h12M9 3l4 4-4 4" stroke="#0b0b0d" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <div aria-live="polite" style={{ minHeight: 22, fontSize: 13, color: state.status === "err" ? "#e9a58c" : "var(--gold-2)" }}>
            {state.msg}
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: ".18em", color: "var(--muted)", marginTop: 8 }}>
            47,000+ READERS · 4.9/5 SATISFACTION
          </div>
        </form>
      </div>
      <style>{`
        @media (max-width: 860px) { #newsletter .container { grid-template-columns: 1fr !important; gap: 40px !important; } }
        @media (max-width: 560px) {
          #newsletter .news-grid { padding: 64px 20px !important; gap: 28px !important; }
          .news-form input { font-size: 18px !important; padding: 14px 0 !important; }
          .news-form button[type="submit"] { padding: 16px 20px !important; font-size: 11px !important; letter-spacing: .14em !important; }
        }
      `}</style>
    </section>
  );
}

// ─────────────── About ───────────────
function About() {
  return (
    <section id="about" style={{ background: "#0a0b10", borderTop: "1px solid var(--line)" }}>
      <div className="container about-container" style={{ padding: "140px 32px", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "start" }}>
        <div className="about-img-wrap" style={{ position: "relative" }}>
          <div style={{ position: "relative", aspectRatio: "4 / 5", overflow: "hidden", background: "#0f1016" }}>
            <img src="assets/george-event.jpg" alt="Dr. George Farah speaking at Binous Classic 2024"
              style={{ width: "100%", height: "100%", objectFit: "cover", filter: "contrast(1.04) saturate(.95)" }} />
            <div aria-hidden style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,transparent 60%,rgba(0,0,0,.6) 100%)" }} />
          </div>
          <div style={{ position: "absolute", left: -24, bottom: -24, width: 200, aspectRatio: "4/3", overflow: "hidden", border: "1px solid var(--line-strong)", background: "#0a0b10" }} className="about-img-sm">
            <img src="assets/george-speaking.jpg" alt="Dr. George Farah speaking" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
        <div>
          <span className="mono" style={{ fontSize: 11, letterSpacing: ".28em", color: "var(--gold)" }}>ABOUT · DR. GEORGE FARAH</span>
          <h2 className="serif" style={{ fontSize: "clamp(32px,4.2vw,52px)", lineHeight: 1.08, fontWeight: 400, margin: "24px 0 32px", letterSpacing: "-0.01em" }}>
            Physician-turned-coach, twenty-five years on the floor.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--soft)", margin: "0 0 20px" }}>
            George Farah was an Egyptian bodybuilder before he was a doctor — and a doctor before he became
            the coach that Olympia-caliber athletes fly across the world to work with. A PhD in Integrative
            Medicine sits alongside three decades of hands-on contest prep.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--soft)", margin: "0 0 40px" }}>
            His method is conservative, data-first, and unusually patient: get the bloodwork right, train
            with precision, and let the physique become inevitable.
          </p>
          <div style={{ display: "flex", flexDirection: "column", borderTop: "1px solid var(--line)" }}>
            {[
              ["Qualifications","PhD, Integrative Medicine · CISSN"],
              ["Born","Lebanon"],
              ["Coaching since","2001"],
              ["Featured in","M&F, Flex, Generation Iron"],
            ].map(([k,v]) => (
              <div key={k} style={{ padding: "20px 0", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", gap: 24 }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: ".22em", color: "var(--muted)" }}>{k.toUpperCase()}</span>
                <span style={{ fontSize: 14, color: "var(--bone)", textAlign: "right" }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      {/* press row */}
      <div style={{ borderTop: "1px solid var(--line)", padding: "32px 0" }}>
        <div className="container press-row" style={{ display: "flex", alignItems: "center", gap: 40, justifyContent: "space-between", flexWrap: "wrap" }}>
          <span className="mono press-label" style={{ fontSize: 11, letterSpacing: ".28em", color: "var(--muted)" }}>AS FEATURED IN</span>
          <div className="press-list" style={{ display: "flex", gap: 40, flexWrap: "wrap", alignItems: "center" }}>
            {window.PRESS.map((p) => (
              <span key={p} className="serif" style={{ fontSize: 18, color: "var(--soft)", fontStyle: "italic", letterSpacing: ".01em" }}>{p}</span>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px) {
        #about .about-container { grid-template-columns: 1fr !important; }
        .about-img-sm { display: none; }
      }
      @media (max-width: 760px) {
        .press-row { flex-direction: column; align-items: flex-start !important; gap: 20px !important; }
        .press-label { align-self: center; }
        .press-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 24px !important; width: 100%; justify-items: center; text-align: center; }
        .press-list > span { font-size: 16px !important; }
      }
      @media (max-width: 560px) {
        #about .about-container { padding: 64px 20px !important; gap: 28px !important; }
        #about .about-img-wrap > div:first-child { max-width: 380px; margin: 0 auto; }
        #about h2 { font-size: 28px !important; margin: 20px 0 20px !important; }
      }`}</style>
    </section>
  );
}

// ─────────────── Coaching / Athletes ───────────────
function Coaching() {
  return (
    <section id="coaching" style={{
      background: "var(--paper)", color: "#0c0c0e",
      borderTop: "1px solid rgba(12,12,14,.1)",
    }}>
      <div className="container coaching-pad" style={{ padding: "140px 32px" }}>
        <div className="coaching-head" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 72px" }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: ".28em", color: "#7a3b2a" }}>COACHING · APPLICATIONS OPEN Q3</span>
          <h2 className="serif" style={{ fontSize: "clamp(30px,4.8vw,60px)", lineHeight: 1.04, fontWeight: 400, margin: "24px 0 20px", letterSpacing: "-0.01em" }}>
            Trusted by the athletes who defined a generation.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: "#3b3b40", margin: 0 }}>
            One-on-one coaching roster stays deliberately small — six to eight athletes at a time.
            Applications reviewed personally, quarterly.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "rgba(12,12,14,.14)", border: "1px solid rgba(12,12,14,.14)" }} className="athlete-grid">
          {window.ATHLETES.map((a, i) => (
            <div key={a.name} className="athlete-cell" style={{ background: "var(--paper)", padding: "40px 32px", minHeight: 220, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: ".22em", color: "#7a3b2a" }}>№ {String(i+1).padStart(2,"0")}</span>
              <div>
                <h3 className="serif athlete-name" style={{ fontSize: 30, fontWeight: 500, margin: "0 0 10px", letterSpacing: "-0.01em" }}>{a.name}</h3>
                <p style={{ fontSize: 13, lineHeight: 1.55, color: "#3b3b40", margin: 0 }}>{a.titles}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="coaching-cta-wrap" style={{ textAlign: "center", marginTop: 64 }}>
          <a href="#" onClick={(e)=>e.preventDefault()} className="coaching-cta"
            style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              padding: "20px 32px", letterSpacing: ".18em", fontSize: 12, textTransform: "uppercase",
              background: "#0c0c0e", color: "#f2eee4", fontWeight: 600,
            }}>
            Submit an Application
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7h12M9 3l4 4-4 4" stroke="#f2eee4" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .athlete-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 580px) { .athlete-grid { grid-template-columns: 1fr !important; } }
        @media (max-width: 560px) {
          .coaching-pad { padding: 64px 20px !important; }
          .coaching-head { margin: 0 auto 32px !important; }
          .athlete-cell { padding: 24px 20px !important; min-height: 140px !important; }
          .athlete-name { font-size: 22px !important; }
          .coaching-cta-wrap { margin-top: 32px !important; }
          .coaching-cta { padding: 16px 22px !important; font-size: 11px !important; letter-spacing: .14em !important; }
        }
      `}</style>
    </section>
  );
}

// ─────────────── Footer ───────────────
function Footer() {
  return (
    <footer style={{ background: "#05060a", borderTop: "1px solid var(--line)" }}>
      <div className="container" style={{ padding: "80px 32px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48 }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
              <window.Monogram />
              <span className="serif" style={{ fontSize: 22 }}>George Farah</span>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.65, color: "var(--muted)", maxWidth: 340, margin: 0 }}>
              Coach, physician, writer. The long game — training, nutrition and integrative medicine —
              delivered plainly and backed by a quarter century of evidence.
            </p>
          </div>
          <FooterCol head="Explore" items={[
            { label: "The Book", href: "book.html" },
            { label: "Topics", href: "topics.html" },
            { label: "Membership", href: "membership.html" },
            { label: "Get Free Guide", action: "lead" },
          ]} />
          <FooterCol head="Coaching" items={[
            { label: "Coaching", href: "coaching.html" },
            { label: "Athletes", href: "coaching.html#athletes" },
            { label: "Apply", href: "coaching.html#apply" },
          ]} />
          <FooterCol head="Connect" items={[
            { label: "Instagram", href: "https://www.instagram.com/georgefarah_guru/" },
            { label: "Twitter / X", href: "https://x.com/gvfarah" },
            { label: "LinkedIn", href: "https://www.linkedin.com/in/george-farah-phd-59a94486" },
          ]} />
        </div>
        <div style={{ marginTop: 72, paddingTop: 32, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }} className="mono">
          <span style={{ fontSize: 11, letterSpacing: ".18em", color: "var(--muted)" }}>© {new Date().getFullYear()} · GF & TMH MEDIA GROUP · ALL RIGHTS RESERVED</span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#" onClick={(e)=>e.preventDefault()} style={{ fontSize: 11, letterSpacing: ".18em", color: "var(--muted)" }}>PRIVACY</a>
            <a href="#" onClick={(e)=>e.preventDefault()} style={{ fontSize: 11, letterSpacing: ".18em", color: "var(--muted)" }}>TERMS</a>
            <a href="#" onClick={(e)=>e.preventDefault()} style={{ fontSize: 11, letterSpacing: ".18em", color: "var(--muted)" }}>CONTACT</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } }
        @media (max-width: 540px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 24px !important; }
          .footer-grid > :first-child { grid-column: 1 / -1; }
        }
      `}</style>
      {window.LeadPopup && <window.LeadPopup />}
    </footer>
  );
}

function FooterCol({ head, items }) {
  return (
    <div>
      <h4 className="mono" style={{ fontSize: 11, letterSpacing: ".28em", color: "var(--gold)", margin: "0 0 20px", fontWeight: 500 }}>{head.toUpperCase()}</h4>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
        {items.map((x) => {
          if (x.action === "lead") {
            return (
              <li key={x.label}>
                <a href="#"
                  onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("gf:openLead")); }}
                  style={{ fontSize: 14, color: "var(--soft)" }}>
                  {x.label}
                </a>
              </li>
            );
          }
          const external = /^https?:/.test(x.href);
          return (
            <li key={x.label}>
              <a href={x.href}
                {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                style={{ fontSize: 14, color: "var(--soft)" }}>
                {x.label}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Object.assign(window, { Book, Writing: Book, Newsletter, About, Coaching, Footer });
