// SKEight — Home page sections

const { useState, useEffect } = React;

// ─────────────────────────────────────────────────────────────
// HERO — App name, positioning, phone with chart
// ─────────────────────────────────────────────────────────────
function Hero() {
  const [screenIdx, setScreenIdx] = useState(0);
  const screens = [
    <AppScreenshot image="chart" alt="Real SKEight chart screenshot" key="chart" />,
    <AppScreenshot image="relationships" alt="Real SKEight relationships screenshot" key="relationships" />,
    <AppScreenshot image="career" alt="Real SKEight career screenshot" key="career" />,
    <AppScreenshot image="now" alt="Real SKEight current cycle screenshot" key="now" />,
  ];
  const labels = ["Chart", "Relationships", "Career", "Current cycle"];

  useEffect(() => {
    const id = setInterval(() => setScreenIdx(i => (i + 1) % screens.length), 5200);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="section" style={{ paddingTop: "clamp(60px, 9vw, 120px)", paddingBottom: "clamp(60px, 9vw, 120px)", borderTop: 0 }}>
      <div className="container" style={{ position: "relative" }}>
        {/* decorative octagon */}
        <div style={{
          position: "absolute", right: -40, top: -20,
          opacity: 0.5, pointerEvents: "none", display: "none",
        }} className="hide-md">
          <EightMark size={260} color="var(--gold)" opacity={0.18} />
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
          gap: "clamp(40px, 6vw, 80px)",
          alignItems: "center",
        }} className="hero-grid">
          <div>
            <h1 className="display" style={{ marginBottom: 28 }}>
              Your birth moment,<br />read through <em>BaZi</em>.
            </h1>
            <p className="lede" style={{ marginBottom: 36, maxWidth: 480 }}>
              You were born at a special moment. SKEight opens that moment through Four Pillars, eight characters, five elements, and the old Chinese language of Ming and Yun.
            </p>

            <div className="hero-stats" style={{
              marginTop: 56, display: "grid",
              gridTemplateColumns: "repeat(3, auto)", gap: 36,
              alignItems: "start",
            }}>
              <Stat label="Pillars" value="4" />
              <Stat label="Characters" value="8" />
              <Stat label="Elements" value="5" />
            </div>
          </div>

          {/* Phone column */}
          <div style={{ display: "flex", justifyContent: "center", position: "relative", overflow: "hidden", width: "100%" }}>
            <div style={{
              position: "absolute", inset: "-40px 0",
              background: "radial-gradient(closest-side, rgba(184,137,58,0.16), transparent 70%)",
              filter: "blur(20px)", pointerEvents: "none",
            }} />
            <div style={{ transform: "scale(0.82)", transformOrigin: "center top", position: "relative", width: "100%" }}>
              <div key={screenIdx} style={{ width: "min(100%, 390px)", margin: "0 auto", animation: "fadeIn 0.6s ease" }}>
                {screens[screenIdx]}
              </div>
            </div>
            <div style={{
              position: "absolute", bottom: 0, left: "50%",
              transform: "translateX(-50%)", display: "flex", gap: 8,
            }}>
              {screens.map((_, i) => (
                <button key={i} onClick={() => setScreenIdx(i)}
                  aria-label={labels[i]}
                  style={{
                    width: i === screenIdx ? 26 : 8, height: 4,
                    background: i === screenIdx ? "var(--gold)" : "rgba(245,240,230,0.18)",
                    borderRadius: 2, transition: "all 0.3s",
                  }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ label, value }) {
  return (
    <div>
      <div className="cap" style={{ marginBottom: 6 }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
        <span className="serif" style={{ fontSize: 36, color: "var(--gold-light)", lineHeight: 1 }}>{value}</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// MANIFESTO — what the chart opens
// ─────────────────────────────────────────────────────────────
function Manifesto() {
  return (
    <section className="section">
      <div className="container">
        <div className="label-row">
          <span className="eyebrow">The old pattern</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)", gap: 80 }} className="two-col">
          <h2 className="title">
            A birth chart begins with one private fact: the sky and time were arranged in a way that belonged only to you.
          </h2>
          <div>
            <p className="body-text" style={{ marginTop: 0, marginBottom: 18 }}>
              In Chinese metaphysics, that moment is not treated as random. It becomes Four Pillars, eight characters, and a map of elements moving through time.
            </p>
            <p className="body-text" style={{ margin: 0 }}>
              SKEight keeps the reading quiet and beautiful: enough structure to feel ancient, enough clarity to make you want to keep looking.
            </p>
          </div>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1fr", gap: 0,
          marginTop: 72, border: "1px solid var(--hairline)",
        }}>
          <div style={{ padding: 32 }} className="manifesto-cell">
            <div className="eyebrow" style={{ marginBottom: 16, color: "var(--gold-light)" }}>
              <span>The language of the reading</span>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {["Four Pillars", "Eight Characters", "Ming and Yun", "Elemental balance", "Hidden stems", "The movement of Yun"].map(w => (
                <li key={w} className="serif" style={{ fontSize: 22, color: "var(--ink)" }}>— {w}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function RealScreensSection() {
  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div className="label-row">
          <span className="eyebrow">Real app screens</span>
        </div>
        <h2 className="title" style={{ maxWidth: 820, marginBottom: 44 }}>
          Actual screenshots from the current SKEight iPhone app.
        </h2>
        <ScreenshotShowcase items={[
          { image: "chart", label: "Chart report", alt: "SKEight chart report screenshot" },
          { image: "relationships", label: "Relationships report", alt: "SKEight relationships report screenshot" },
          { image: "career", label: "Career report", alt: "SKEight career report screenshot" },
          { image: "health", label: "Health report", alt: "SKEight health report screenshot" },
          { image: "past", label: "Past cycle report", alt: "SKEight past luck cycle screenshot" },
          { image: "now", label: "Current cycle report", alt: "SKEight current luck cycle screenshot" },
          { image: "future", label: "Future cycle report", alt: "SKEight future luck cycle screenshot" },
        ]} />
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Manifesto, RealScreensSection });
