// Hero with four treatments; selected via Tweaks

const TRENDING = [
  "emergency fund",
  "LLC vs S-corp",
  "automate savings",
  "real profit margin",
  "negotiate salary",
  "business line of credit",
];

function MarketStrip() {
  const rows = [
    ["S&P 500",  "5,847.12", "+0.42%", true],
    ["NASDAQ",   "18,412.88","+0.61%", true],
    ["DOW",      "42,018.45","-0.08%", false],
    ["10Y YLD",  "4.218%",   "-0.02",  false],
    ["BTC/USD",  "71,244",   "+1.84%", true],
    ["USD IDX",  "103.21",   "+0.11%", true],
  ];
  return (
    <div className="market">
      {rows.map((r, i) => (
        <div key={i} className="market__cell">
          <div className="market__k">{r[0]}</div>
          <div className="market__v">{r[1]}</div>
          <div className={`market__d ${r[3] ? "up" : "down"}`}>
            {r[3] ? "▲" : "▼"} {r[2]}
          </div>
        </div>
      ))}
    </div>
  );
}

function ChartBackdrop() {
  // Big faint line chart
  const path = "M0,420 L80,400 L160,410 L240,380 L320,390 L400,340 L480,350 L560,300 L640,320 L720,260 L800,280 L880,200 L960,240 L1040,160 L1120,190 L1200,120 L1280,150 L1360,90 L1440,130";
  const area = path + " L1440,540 L0,540 Z";
  return (
    <svg className="hero__chart" viewBox="0 0 1440 540" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id="gfill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#99edc3" stopOpacity="0.18"/>
          <stop offset="100%" stopColor="#99edc3" stopOpacity="0"/>
        </linearGradient>
        <pattern id="grid" width="80" height="60" patternUnits="userSpaceOnUse">
          <path d="M80 0 L0 0 0 60" fill="none" stroke="#ffffff" strokeOpacity="0.05" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="1440" height="540" fill="url(#grid)"/>
      <path d={area} fill="url(#gfill)"/>
      <path d={path} fill="none" stroke="#99edc3" strokeOpacity="0.55" strokeWidth="1.25"/>
      {[0,1,2,3,4].map(i => (
        <line key={i} x1="0" x2="1440" y1={108*i+60} y2={108*i+60} stroke="#ffffff" strokeOpacity="0.04"/>
      ))}
    </svg>
  );
}

function SplitBackdrop() {
  return (
    <div className="hero__split" aria-hidden="true">
      <div className="hero__split-l">
        <div className="hero__split-label">01 · PERSONAL</div>
      </div>
      <div className="hero__split-r">
        <div className="hero__split-label">02 · BUSINESS</div>
      </div>
    </div>
  );
}

function PhotoBackdrop() {
  // pure CSS "editorial desk" — no real photo. Subtle duotone, layered rectangles.
  return (
    <div className="hero__photo" aria-hidden="true">
      <div className="hero__photo-grain" />
      <div className="hero__photo-doc hero__photo-doc--1" />
      <div className="hero__photo-doc hero__photo-doc--2" />
      <div className="hero__photo-doc hero__photo-doc--3" />
      <div className="hero__photo-cup" />
      <div className="hero__photo-tag">[ EDITORIAL PLACEHOLDER · desk + financial times + coffee ]</div>
    </div>
  );
}

function VideoBackdrop() {
  return (
    <video
      className="hero__video"
      autoPlay
      muted
      loop
      playsInline
      preload="auto"
      aria-hidden="true"
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        objectFit: "cover",
        zIndex: 0,
        pointerEvents: "none",
      }}
    >
      <source src="/hero.mp4" type="video/mp4" />
    </video>
  );
}

function Hero({ treatment = "video", lane, onSearchFocus }) {
  const [q, setQ] = React.useState("");
  return (
    <section className={`hero hero--${treatment} hero--${lane}`}>
      {treatment === "video" && <VideoBackdrop />}
      {treatment === "chart" && <ChartBackdrop />}
      {treatment === "split" && <SplitBackdrop />}
      {treatment === "photo" && <PhotoBackdrop />}
      {treatment === "solid" && (
        <div className="hero__grid-bg" aria-hidden="true" />
      )}

      <div className="hero__inner">
        <div className="hero__kicker">
          <span className="hero__dot" /> PART OF THE HOWTO NETWORK
          <span className="hero__badge">FINANCE</span>
        </div>

        <h1 className="hero__h1">
          <span>Personal.</span>
          <span>Business.</span>
          <span className="hero__accent">Answered.</span>
        </h1>

        <p className="hero__lede">
          Plain-language how-to guides for your money and your business. Two lanes.
          One terminal. Built for the quiet work of getting it right.
        </p>

        <form className="hero__search" onSubmit={(e) => e.preventDefault()}>
          <span className="hero__search-label">SEARCH &gt;</span>
          <input
            placeholder="how to…"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onFocus={onSearchFocus}
          />
          <span className="hero__search-kbd">⌘ K</span>
          <button type="submit" className="hero__search-btn">EXECUTE</button>
        </form>

        <div className="hero__trending">
          <span className="hero__trending-k">TRENDING —</span>
          {TRENDING.map((t, i) => (
            <button key={i} className="hero__chip">{t}</button>
          ))}
        </div>
      </div>

      <MarketStrip />
    </section>
  );
}

Object.assign(window, { Hero, MarketStrip });