/* Public landing page */
const { Brand, Ring, Eyebrow, Placeholder, Icon, DataRow } = window;
function Landing({ go }) {
  return (
    <div className="fade-in" style={{ minHeight: "100vh", background: "var(--bg)" }}>
      {/* Top nav */}
      <header style={{
        position: "sticky", top: 0, zIndex: 5,
        background: "var(--bg)",
        borderBottom: "1px solid var(--line)",
        padding: "16px 40px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <Brand size="md" />
        <nav className="row" style={{ gap: 28 }}>
          <a href="#program"     className="muted" style={{ fontSize: 14 }}>The Program</a>
          <a href="#tdee"        className="muted" style={{ fontSize: 14 }}>TDEE</a>
          <a href="#how"         className="muted" style={{ fontSize: 14 }}>How it works</a>
          <a href="#announce"    className="muted" style={{ fontSize: 14 }}>Announcements</a>
        </nav>
        <div className="row" style={{ gap: 10 }}>
          <button className="btn btn-ghost btn-sm" onClick={() => go("login")}>Log in</button>
          <button className="btn btn-primary btn-sm" onClick={() => go("login")}>
            Redeem code <Icon name="arrow" size={14} />
          </button>
        </div>
      </header>

      {/* Hero */}
      <section style={{ padding: "60px 40px 40px", maxWidth: 1400, margin: "0 auto" }}>
        <div className="row" style={{ gap: 12, marginBottom: 28 }}>
          <span className="chip dot">Filipino-focused • Low sodium / low fat</span>
          <span className="chip mono">@1500calories • TikTok</span>
        </div>

        <h1 className="h-display" style={{ margin: 0 }}>
          Eat what<br />
          you grew up<br />
          <span style={{ color: "var(--accent)", WebkitTextStroke: "1px var(--accent-ink)" }}>eating.</span> <span style={{ color: "var(--fg-muted)" }}>Lose</span><br />
          <span style={{ color: "var(--fg-muted)" }}>the weight.</span>
        </h1>

        <div className="row" style={{ marginTop: 44, gap: 16, flexWrap: "wrap" }}>
          <button className="btn btn-primary" style={{ padding: "18px 28px", fontSize: 15 }} onClick={() => go("login")}>
            I have a code — get me in <Icon name="arrow" size={16} />
          </button>
          <button className="btn btn-ghost" style={{ padding: "18px 28px", fontSize: 15 }} onClick={() => go("login")}>
            How to join the program
          </button>
          <div className="muted mono" style={{ fontSize: 12, marginLeft: 8 }}>
            Invite-only • 7 / 30 / 60 / 90 / 365 day passes
          </div>
        </div>

        {/* Hero data row */}
        <div className="landing-stats" style={{ marginTop: 60 }}>
          {[
            ["1.2M+", "Followers on TikTok"],
            ["180+", "Filipino-focused dishes"],
            ["3 paths", "Lose / maintain / gain"],
            ["1:1", "Coach in your corner"],
          ].map(([big, sub], i) => (
            <div key={i}>
              <div className="h-data" style={{ fontSize: 44 }}>{big}</div>
              <div className="muted" style={{ marginTop: 8, fontSize: 13 }}>{sub}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Marquee */}
      <div className="marquee">
        <div className="marquee-inner">
          {Array.from({ length: 2 }).map((_, k) => (
            <React.Fragment key={k}>
              <span>Adobo, just lighter</span>
              <span>Sinigang season</span>
              <span>Macros that math</span>
              <span>Drag-and-drop meals</span>
              <span>Weekly check-ins</span>
              <span>Filipino-first kitchen</span>
              <span>No fad diets</span>
              <span>1500 cal energy</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* What's included */}
      <section id="program" style={{ padding: "80px 40px", maxWidth: 1400, margin: "0 auto" }}>
        <div className="between" style={{ marginBottom: 40, alignItems: "end" }}>
          <div>
            <Eyebrow>01 — What's inside</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 12 }}>Built for the way <br/>we actually eat.</h2>
          </div>
          <div className="muted" style={{ maxWidth: 360, fontSize: 14 }}>
            Every meal plan is built around Pinoy staples — adobo, sinigang, tinola — with
            swaps for low-sodium and low-fat options so you keep the flavour, lose the bloat.
          </div>
        </div>

        <div className="grid-3">
          <FeatureCard num="01" title="Your TDEE, dialed in"
            body="Mandatory before anything else. We use Mifflin-St Jeor + your activity level. Saved to your profile so plans auto-tune as your weight changes." />
          <FeatureCard num="02" title="Lose / maintain / gain"
            body="Pick a path — then a level (slow, moderate, aggressive). Calorie target & macros are computed for you. Switch any time." />
          <FeatureCard num="03" title="Meal plans, your way"
            body="Day view for tonight. Week board for planning ahead. Drag-and-drop to switch meals. Regenerate with similar macros (up to 2x)." />
          <FeatureCard num="04" title="Macro-balanced weekly budget"
            body="Went over today? We trim a little off the next few days so your weekly budget still lands. We tell you exactly what changed." />
          <FeatureCard num="05" title="Progress photos, private"
            body="Optional gallery. Photos sync to your own Google Drive folder, grouped by date. Delete from the app any time." />
          <FeatureCard num="06" title="1:1 coaching" badge="Coach"
            body="Your coach can adjust your plan, tweak budgets, and check in. Direct messages, no chasing." />
        </div>
      </section>

      {/* TDEE section */}
      <section id="tdee" style={{ background: "var(--fg)", color: "var(--bg)", padding: "100px 40px" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }} className="grid-2">
          <div>
            <div className="eyebrow" style={{ color: "var(--bg-soft)", opacity: 0.7 }}>02 — TDEE</div>
            <h2 className="h-section" style={{ marginTop: 12, color: "var(--bg)" }}>
              The math the<br/>app does for you.
            </h2>
            <p style={{ maxWidth: 460, marginTop: 24, color: "var(--bg-soft)", opacity: 0.8 }}>
              We use the Mifflin–St Jeor equation, the same one tdeecalculator.net uses.
              Your TDEE is locked to your profile and re-checked weekly — so as your body
              changes, your calorie target moves with it.
            </p>
            <div className="row" style={{ marginTop: 32, gap: 8, flexWrap: "wrap" }}>
              <span className="chip dark" style={{ background: "var(--bg)", color: "var(--fg)" }}>Mifflin–St Jeor</span>
              <span className="chip dark" style={{ background: "var(--bg)", color: "var(--fg)" }}>5 activity levels</span>
              <span className="chip dark" style={{ background: "var(--bg)", color: "var(--fg)" }}>Auto-recalc</span>
            </div>
          </div>

          <div style={{
            background: "var(--bg-soft)",
            borderRadius: "var(--r-xl)",
            padding: 32,
            color: "var(--fg)",
          }}>
            <Eyebrow>Live example</Eyebrow>
            <div className="row" style={{ marginTop: 16, gap: 24 }}>
              <Ring value={2150} max={2400} size={140} stroke={14}
                label="2,150" sub="kcal · target" />
              <div className="col" style={{ flex: 1, gap: 14 }}>
                <DataRow k="Sex" v="Male" />
                <DataRow k="Age" v="32" />
                <DataRow k="Weight" v="78.4 kg" />
                <DataRow k="Height" v="172 cm" />
                <DataRow k="Activity" v="Moderate" />
                <hr className="divider" />
                <DataRow k="BMR"  v="1,710 kcal" muted />
                <DataRow k="TDEE" v="2,650 kcal" muted />
                <DataRow k="Goal" v="Moderate cut" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section id="how" style={{ padding: "100px 40px", maxWidth: 1400, margin: "0 auto" }}>
        <Eyebrow>03 — How it works</Eyebrow>
        <h2 className="h-section" style={{ marginTop: 12, marginBottom: 60 }}>
          From code to cooking.
        </h2>

        <div className="grid-4">
          {[
            ["Get a code", "Codes come from Tito Fit — 7, 30, 60, 90, or 365 days. Redeem on login."],
            ["Set your TDEE", "One-time onboarding. Honest numbers in, honest target out."],
            ["Pick your path", "Lose, maintain, or gain. Pick a level. We do the macros."],
            ["Cook, eat, track", "Day view today, week board ahead. Drag to swap. Check in weekly."],
          ].map(([t, b], i) => (
            <div key={i} className="col" style={{ gap: 16 }}>
              <div className="row" style={{ gap: 12 }}>
                <div className="chip dark" style={{ width: 28, height: 28, padding: 0, justifyContent: "center", fontWeight: 700 }}>
                  {i + 1}
                </div>
                <div className="eyebrow">Step</div>
              </div>
              <h3 className="h-card">{t}</h3>
              <div className="muted" style={{ fontSize: 14 }}>{b}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Announcements teaser */}
      <section id="announce" style={{ padding: "60px 40px 100px", maxWidth: 1400, margin: "0 auto" }}>
        <div className="between" style={{ marginBottom: 32, alignItems: "end" }}>
          <div>
            <Eyebrow>04 — Announcements</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 12 }}>What's happening.</h2>
          </div>
          <div className="muted" style={{ fontSize: 14 }}>Public board • Members see more inside</div>
        </div>
        <div className="grid-3">
          {window.MOCK.ANNOUNCEMENTS.map(a => (
            <div key={a.id} className="card" style={{ minHeight: 200 }}>
              <div className="between" style={{ marginBottom: 16 }}>
                <span className="chip">{a.tag}</span>
                <span className="muted mono" style={{ fontSize: 12 }}>{a.date}</span>
              </div>
              <h3 className="h-card" style={{ marginBottom: 8 }}>{a.title}</h3>
              <p className="muted" style={{ fontSize: 14, margin: 0 }}>{a.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "0 40px 100px", maxWidth: 1400, margin: "0 auto" }}>
        <div className="landing-cta">
          <div className="eyebrow" style={{ color: "var(--accent-ink)", opacity: 0.7 }}>05 — Get started</div>
          <h2 className="h-display" style={{ fontSize: "clamp(48px, 7vw, 96px)", margin: "16px 0 32px" }}>
            Ready when<br/>you are.
          </h2>
          <div className="row" style={{ gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-dark" style={{ padding: "16px 26px" }} onClick={() => go("login")}>
              Log in with code <Icon name="arrow" size={14} />
            </button>
            <button className="btn btn-ghost" style={{ padding: "16px 26px", borderColor: "var(--accent-ink)" }} onClick={() => go("login")}>
              How to get a code
            </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer style={{
        borderTop: "1px solid var(--line)",
        padding: "32px 40px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        flexWrap: "wrap", gap: 16,
      }}>
        <Brand size="sm" />
        <div className="muted mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
          © 2026 Get Fit • Not affiliated with elite-pc.com
        </div>
      </footer>
    </div>
  );
}

function FeatureCard({ num, title, body, badge }) {
  return (
    <div className="card" style={{ minHeight: 220, display: "flex", flexDirection: "column" }}>
      <div className="between" style={{ marginBottom: 24 }}>
        <span className="mono muted" style={{ fontSize: 12 }}>{num}</span>
        {badge && <span className="chip solid" style={{ fontSize: 10 }}>{badge}</span>}
      </div>
      <h3 className="h-card" style={{ marginBottom: 10 }}>{title}</h3>
      <p className="muted" style={{ fontSize: 14, margin: 0 }}>{body}</p>
    </div>
  );
}

Object.assign(window, { Landing });