/* global React */
const { useState, useEffect, useRef } = React;

/* ============================================================
   Shared bits
============================================================ */
const heroCopy = {
  eyebrow: "Your complete family's health records. In one place.",
  headline: (
    <>Your family's complete <em>health memory.</em></>
  ),
  sub: "Reports, prescriptions, medicines, vaccinations, menstrual cycles, doctor visits, Ayurvedic treatments — intelligently organized into one secure timeline your family can access anytime.",
  ctaPrimary: "Start free now",
  ctaSecondary: "See how it works",
  trust: "Your records stay in your own Google Drive. Always under your control."
};

function HeroCTAs() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start" }}>
      <div className="cta-row">
        <button className="btn btn-primary">
          {heroCopy.ctaPrimary} →
          <span className="arrow">→</span>
        </button>
        <button className="btn btn-ghost">{heroCopy.ctaSecondary}</button>
      </div>
      <div className="trust">
        <span className="trust-icon">✓</span>
        {heroCopy.trust}
      </div>
    </div>
  );
}

function TelegramGlyph() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden>
      <path d="M21.5 3.5 2.5 11l5.5 1.8L18 6l-7.5 8 6 4 5-14.5z" fill="currentColor" />
    </svg>
  );
}

/* ============================================================
   Variant A — Timeline
============================================================ */
function HeroTimeline() {
  return (
    <section className="hero">
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)",
        gap: 64,
        alignItems: "center"
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <span className="eyebrow"><span className="dot"></span>{heroCopy.eyebrow}</span>
          <h1>{heroCopy.headline}</h1>
          <p className="sub">{heroCopy.sub}</p>
          <HeroCTAs />
        </div>
        <TimelineVisual />
      </div>
    </section>
  );
}

function TimelineVisual() {
  const rows = [
    { who: "Amma", role: "Mother, 64", color: "var(--c-brand)", events: [
        { date: "Today",    label: "BP reading logged", kind: "vital" },
        { date: "Jul 12",   label: "Cardiology follow-up", kind: "visit" },
        { date: "Jun 03",   label: "Telmisartan 40mg", kind: "med" },
        { date: "May 18",   label: "Lipid panel — uploaded", kind: "report" },
      ]
    },
    { who: "Appa", role: "Father, 68", color: "var(--c-slate)", events: [
        { date: "Aug 02",   label: "Ayurveda consult — joints", kind: "visit" },
        { date: "Jul 21",   label: "Knee MRI report", kind: "report" },
      ]
    },
    { who: "Riya",  role: "Daughter, 9", color: "var(--c-accent)", events: [
        { date: "Sep 14",   label: "MMR booster due", kind: "due" },
        { date: "Mar 09",   label: "Pediatric visit notes", kind: "visit" },
      ]
    },
  ];
  const kindColor = {
    vital: "var(--c-brand-deep)",
    visit: "var(--c-slate)",
    med:   "var(--c-accent)",
    report:"var(--c-ink-2)",
    due:   "var(--c-accent)"
  };
  return (
    <div style={{ position: "relative" }}>
      <div className="card" style={{
        padding: 22,
        background: "var(--c-card)",
        boxShadow: "var(--shadow-md)"
      }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginBottom: 14, paddingBottom: 14,
          borderBottom: "1px solid var(--c-line)"
        }}>
          <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 15 }}>The Iyer family · Timeline</div>
          <div style={{ display: "flex", gap: 6 }}>
            <span className="pill" style={{ fontSize: 11 }}>This month</span>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          {rows.map((r, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 14 }}>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: "50%",
                    background: `color-mix(in oklab, ${r.color} 35%, transparent)`,
                    color: r.color,
                    display: "grid", placeItems: "center",
                    fontSize: 10, fontWeight: 700
                  }}>{r.who[0]}</span>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>{r.who}</div>
                </div>
                <div style={{ color: "var(--c-mute)", fontSize: 11.5, marginTop: 2, paddingLeft: 30 }}>{r.role}</div>
              </div>
              <div style={{ position: "relative", paddingLeft: 14, borderLeft: "1px dashed var(--c-line)" }}>
                {r.events.map((e, j) => (
                  <div key={j} style={{ display: "flex", gap: 10, alignItems: "baseline", padding: "4px 0" }}>
                    <span style={{
                      position: "absolute", left: -4, marginTop: 8,
                      width: 7, height: 7, borderRadius: "50%",
                      background: kindColor[e.kind],
                      transform: `translateY(${j * 28}px)`,
                      display: "none"
                    }} />
                    <span style={{
                      width: 64, color: "var(--c-mute)", fontFamily: "var(--mono)", fontSize: 11
                    }}>{e.date}</span>
                    <span style={{ flex: 1, fontSize: 13.5 }}>{e.label}</span>
                    <span style={{
                      fontSize: 10, fontFamily: "var(--mono)",
                      letterSpacing: ".08em", textTransform: "uppercase",
                      color: kindColor[e.kind],
                      padding: "2px 7px",
                      borderRadius: 4,
                      background: `color-mix(in oklab, ${kindColor[e.kind]} 12%, transparent)`
                    }}>{e.kind}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Floating helper card */}
      <div style={{
        position: "absolute", right: -18, bottom: -28,
        background: "var(--c-ink)", color: "var(--c-bg)",
        borderRadius: 14, padding: "12px 14px",
        fontSize: 13, maxWidth: 230,
        boxShadow: "var(--shadow-md)",
        transform: "rotate(-2deg)"
      }}>
        <div style={{ fontFamily: "var(--serif)", fontWeight: 600, marginBottom: 2 }}>Amma's BP drifted up.</div>
        <div style={{ opacity: 0.75, fontSize: 12 }}>Last 3 readings ↑. Reminder set for Tuesday.</div>
      </div>
    </div>
  );
}

/* ============================================================
   Variant B — Family card stack
============================================================ */
function HeroStack() {
  return (
    <section className="hero">
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.05fr)",
        gap: 56, alignItems: "center"
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <span className="eyebrow"><span className="dot"></span>{heroCopy.eyebrow}</span>
          <h1>{heroCopy.headline}</h1>
          <p className="sub">{heroCopy.sub}</p>
          <HeroCTAs />
        </div>
        <FamilyStackVisual />
      </div>
    </section>
  );
}

function FamilyStackVisual() {
  const members = [
    { name: "Amma",  role: "Mother",   tag: "12 records",  accent: "var(--c-brand)" },
    { name: "Appa",  role: "Father",   tag: "8 records",   accent: "var(--c-slate)" },
    { name: "Arjun", role: "Self",     tag: "5 records",   accent: "var(--c-accent)" },
    { name: "Riya",  role: "Daughter", tag: "Vaccinations", accent: "#9b8cc9" },
  ];
  return (
    <div style={{ position: "relative", height: 540 }}>
      {members.map((m, i) => {
        const rot = [-4, 2.5, -2, 3][i];
        const offsetY = i * 84;
        const offsetX = [0, 36, 10, 44][i];
        return (
          <div key={i} style={{
            position: "absolute",
            left: offsetX, top: offsetY,
            width: "78%",
            background: "var(--c-card)",
            border: "1px solid var(--c-line)",
            borderRadius: 18,
            boxShadow: "0 10px 30px rgba(20,30,30,.08), 0 2px 6px rgba(20,30,30,.04)",
            transform: `rotate(${rot}deg)`,
            padding: 20,
            display: "grid",
            gridTemplateColumns: "auto 1fr auto",
            alignItems: "center",
            gap: 16,
            transition: "transform .3s"
          }}>
            <div style={{
              width: 46, height: 46, borderRadius: "50%",
              background: `linear-gradient(135deg, ${m.accent}, color-mix(in oklab, ${m.accent} 40%, white))`,
              display: "grid", placeItems: "center",
              color: "white", fontFamily: "var(--serif)", fontWeight: 700, fontSize: 16
            }}>{m.name[0]}</div>
            <div>
              <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 17 }}>{m.name}</div>
              <div style={{ color: "var(--c-mute)", fontSize: 13 }}>{m.role}</div>
            </div>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 11,
              padding: "5px 9px",
              borderRadius: 999,
              background: `color-mix(in oklab, ${m.accent} 14%, transparent)`,
              color: m.accent
            }}>{m.tag}</div>
            {/* mini chart */}
            <div style={{ gridColumn: "1 / -1", display: "flex", gap: 4, height: 28, alignItems: "flex-end", marginTop: 4 }}>
              {Array.from({ length: 28 }).map((_, k) => {
                const h = 6 + (Math.sin(k * 0.7 + i) + 1.5) * 6;
                return <span key={k} style={{
                  flex: 1,
                  background: `color-mix(in oklab, ${m.accent} ${30 + (k%3)*15}%, var(--c-bg-2))`,
                  borderRadius: 2,
                  height: h
                }} />;
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ============================================================
   Variant C — Editorial
============================================================ */
function HeroEditorial() {
  return (
    <section className="hero" style={{ paddingBottom: 120 }}>
      <div className="wrap" style={{
        display: "flex", flexDirection: "column", alignItems: "center",
        gap: 32, textAlign: "center"
      }}>
        <span className="eyebrow"><span className="dot"></span>Arogya remembers what healthcare systems forget</span>
        <h1 style={{
          fontSize: "clamp(48px, 8vw, 104px)",
          letterSpacing: "-0.04em",
          lineHeight: 0.98,
          maxWidth: 1100
        }}>
          Your family's <br/>complete <em>health memory.</em>
        </h1>
        <p className="sub" style={{ textAlign: "center", maxWidth: 640 }}>{heroCopy.sub}</p>
        <HeroCTAs />

        <div style={{
          marginTop: 36,
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 32,
          width: "100%",
          alignItems: "stretch"
        }}>
          <TelegramSnippet />
          <img
            src="/static/landing/images/family.png"
            alt="A family organising their health records"
            style={{ minHeight: 320, width: "100%", display: "block", objectFit: "cover", borderRadius: 20 }}
          />
        </div>
      </div>
    </section>
  );
}

function TelegramSnippet() {
  const msgs = [
    { from: "you", text: "📎 Mom's blood test — Apollo 22 Aug.pdf" },
    { from: "bot", text: "Got it. Filed under Amma → Reports → Lipid Panel. Cholesterol slightly up vs Feb. Want me to compare?" },
    { from: "you", text: "yes" },
    { from: "bot", text: "Total cholesterol 218 → 234. LDL also up. I'll flag for Amma's next cardio visit." },
  ];
  return (
    <div style={{
      background: "var(--c-card)",
      borderRadius: 22,
      border: "1px solid var(--c-line)",
      padding: 18,
      boxShadow: "var(--shadow-md)",
      display: "flex", flexDirection: "column", gap: 10,
      textAlign: "left"
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 10,
        paddingBottom: 12, borderBottom: "1px solid var(--c-line)"
      }}>
        <div style={{
          width: 34, height: 34, borderRadius: "50%",
          background: "var(--c-brand)", display: "grid", placeItems: "center", color: "white"
        }}><TelegramGlyph /></div>
        <div>
          <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 14 }}>Arogya</div>
          <div style={{ fontSize: 11.5, color: "var(--c-mute)" }}>on Telegram · now</div>
        </div>
      </div>
      {msgs.map((m, i) => (
        <div key={i} style={{
          alignSelf: m.from === "you" ? "flex-end" : "flex-start",
          maxWidth: "84%",
          background: m.from === "you"
            ? "color-mix(in oklab, var(--c-brand) 22%, transparent)"
            : "color-mix(in oklab, var(--c-bg-2) 80%, var(--c-bg))",
          color: "var(--c-ink)",
          borderRadius: m.from === "you" ? "14px 14px 4px 14px" : "14px 14px 14px 4px",
          padding: "10px 14px",
          fontSize: 13.5,
          lineHeight: 1.45,
          border: "1px solid color-mix(in oklab, var(--c-line) 70%, transparent)"
        }}>{m.text}</div>
      ))}
    </div>
  );
}

/* ============================================================
   Variant D — Split Portrait
============================================================ */
function useNarrow(bp) {
  bp = bp || 760;
  const [narrow, setNarrow] = React.useState(typeof window !== "undefined" && window.innerWidth < bp);
  React.useEffect(function() {
    function h() { setNarrow(window.innerWidth < bp); }
    window.addEventListener("resize", h);
    return function() { window.removeEventListener("resize", h); };
  }, []);
  return narrow;
}

function HeroPortrait() {
  const narrow = useNarrow(760);
  return (
    <section className="hero" style={{ padding: narrow ? "28px 0 0" : "32px 0 96px" }}>
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: narrow ? "1fr" : "minmax(0, 1fr) minmax(0, 1.15fr)",
        gap: narrow ? 24 : 48,
        alignItems: "stretch"
      }}>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: narrow ? 18 : 28, padding: narrow ? "0" : "32px 0" }}>
          <span className="eyebrow"><span className="dot"></span>{heroCopy.eyebrow}</span>
          <h1>{heroCopy.headline}</h1>
          <p className="sub">{heroCopy.sub}</p>
          <HeroCTAs />
        </div>
        <div style={{ position: "relative", minHeight: narrow ? "auto" : 540 }}>
          <img src="/static/landing/images/hero.png" alt="Indian family" style={{
            width: "100%", height: narrow ? 240 : "100%",
            objectFit: "cover", borderRadius: narrow ? "12px 12px 0 0" : 20,
            display: "block"
          }} />
          {!narrow && (
            <React.Fragment>
              <div style={{
                position: "absolute", left: -28, bottom: 28,
                background: "var(--c-card)", borderRadius: 16,
                border: "1px solid var(--c-line)", padding: 16, width: 280,
                boxShadow: "var(--shadow-md)", display: "flex", flexDirection: "column", gap: 10
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: "color-mix(in oklab, var(--c-brand) 22%, transparent)", color: "var(--c-brand-deep)", display: "grid", placeItems: "center", fontSize: 17 }}>♡</div>
                  <div>
                    <div style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 14 }}>Amma's vitals</div>
                    <div style={{ color: "var(--c-mute)", fontSize: 11.5 }}>Last 30 days</div>
                  </div>
                </div>
                <div style={{ display: "flex", gap: 14 }}>
                  <Mini label="BP" v="128/82" trend="up" />
                  <Mini label="Sugar" v="106" trend="ok" />
                  <Mini label="HR" v="74" trend="ok" />
                </div>
              </div>
              <div style={{ position: "absolute", right: -16, top: 32, background: "var(--c-ink)", color: "var(--c-bg)", padding: "10px 14px", borderRadius: 12, fontSize: 12.5, maxWidth: 220, boxShadow: "var(--shadow-md)" }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, opacity: .7, marginBottom: 2 }}>REMINDER · TUE 9:00</div>
                <div>Appa's Ayurveda follow-up in 2 days</div>
              </div>
            </React.Fragment>
          )}
          {narrow && (
            <div style={{ display: "flex", gap: 8, padding: "10px 0 24px", flexWrap: "wrap" }}>
              {["🔒 Secure", "☁️ Your Drive", "👨‍👩‍👧 Family-wide"].map(function(t) {
                return <span key={t} style={{ background: "var(--c-card)", border: "1px solid var(--c-line)", borderRadius: 20, padding: "6px 14px", fontSize: 12, color: "var(--c-ink-2)" }}>{t}</span>;
              })}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Mini({ label, v, trend }) {
  const color = trend === "up" ? "var(--c-accent)" : "var(--c-brand-deep)";
  return (
    <div>
      <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--c-mute)", textTransform: "uppercase", letterSpacing: ".1em" }}>{label}</div>
      <div style={{ fontFamily: "var(--serif)", fontWeight: 600, color, fontSize: 17, lineHeight: 1.1 }}>{v}</div>
    </div>
  );
}

window.AroHero = { HeroTimeline, HeroStack, HeroEditorial, HeroPortrait };