/* global React */
const { useState: useHIState, useEffect: useHIEffect } = React;

/* =========================================================
   HeroIllustration — Deposit splits into 5 reserve vessels
   Refined: dollar icon in puck, deposit info on a clean chip
   above, tier labels uncluttered, caption strip explains it.
   ========================================================= */
function HeroIllustration() {
  const tiers = [
    { key: "tax",    label: "Tax",       short: "Tax",   color: "#e8b53b" },
    { key: "ops",    label: "Operating", short: "Ops",   color: "#3a8dde" },
    { key: "owner",  label: "Owner pay", short: "Owner", color: "#2e9143" },
    { key: "growth", label: "Growth",    short: "Growth",color: "#8c5cd6" },
    { key: "wealth", label: "Wealth",    short: "Wealth",color: "#1c6529" },
  ];

  const scenarios = [
    { name: "Steady month",     sub: "Default split",       depAmt: 5400,  depName: "Acme retainer",
      pcts: { tax: 28, ops: 24, owner: 28, growth: 12, wealth: 8 } },
    { name: "Tight month",      sub: "Cover the basics",    depAmt: 2100,  depName: "Northwind partial",
      pcts: { tax: 28, ops: 40, owner: 22, growth: 6,  wealth: 4 } },
    { name: "Big project paid", sub: "Spread the windfall", depAmt: 12800, depName: "Globex milestone",
      pcts: { tax: 30, ops: 18, owner: 22, growth: 16, wealth: 14 } },
    { name: "Tax-due quarter",  sub: "Bulk the reserve",    depAmt: 6800,  depName: "Project X final",
      pcts: { tax: 42, ops: 22, owner: 20, growth: 10, wealth: 6 } },
    { name: "Surplus season",   sub: "Compound the runway", depAmt: 4400,  depName: "Initech bonus",
      pcts: { tax: 28, ops: 18, owner: 22, growth: 16, wealth: 16 } },
  ];

  const [idx, setIdx] = useHIState(0);
  useHIEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % scenarios.length), 6500);
    return () => clearInterval(id);
  }, []);

  const cur = scenarios[idx];

  // Layout (viewBox 560x560)
  const W = 560, H = 560;
  const PUCK_CX = W / 2, PUCK_CY = 130, PUCK_R = 56;
  const HUB_Y = 220;

  const VESSEL_TOP = 290;
  const VESSEL_BOTTOM = 470;
  const VESSEL_H = VESSEL_BOTTOM - VESSEL_TOP;
  const VESSEL_W = 60;
  const GAP = 28;
  const totalW = tiers.length * VESSEL_W + (tiers.length - 1) * GAP;
  const startX = (W - totalW) / 2;
  const tierCx = (i) => startX + i * (VESSEL_W + GAP) + VESSEL_W / 2;

  return (
    <div className="hi3">
      {/* Header */}
      <div className="hi3-header">
        <div className="hi3-header-l">
          <div className="hi3-dot-cluster"><span/><span/><span/></div>
          <span className="hi3-app-name">ReservWise · Income Split</span>
        </div>
        <div className="hi3-live"><span className="hi3-live-dot"></span> LIVE</div>
      </div>

      {/* Scenario strip */}
      <div className="hi3-scenario">
        <div className="hi3-scenario-l">
          <div className="hi3-eyebrow">Scenario</div>
          <div className="hi3-scenario-name" key={`name-${idx}`}>{cur.name}</div>
          <div className="hi3-scenario-sub" key={`sub-${idx}`}>{cur.sub}</div>
        </div>
        <div className="hi3-invariant">
          <span className="hi3-inv-icon">∑</span>
          <span className="hi3-inv-val">100%</span>
        </div>
      </div>

      {/* The visualization */}
      <div className="hi3-stage">
        <svg viewBox={`0 0 ${W} ${H}`} className="hi3-svg" aria-hidden="true">
          <defs>
            {tiers.map(t => (
              <linearGradient key={t.key} id={`g-${t.key}`} x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%"  stopColor={t.color} stopOpacity="0.85"/>
                <stop offset="100%" stopColor={t.color} stopOpacity="1"/>
              </linearGradient>
            ))}
            <radialGradient id="puckGlow">
              <stop offset="0%"  stopColor="#2e9143" stopOpacity="0.18"/>
              <stop offset="70%" stopColor="#2e9143" stopOpacity="0.02"/>
              <stop offset="100%" stopColor="#2e9143" stopOpacity="0"/>
            </radialGradient>
            <linearGradient id="puckBg" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%"  stopColor="#2e9143"/>
              <stop offset="100%" stopColor="#1c6529"/>
            </linearGradient>
          </defs>

          {/* Soft background glow under deposit */}
          <circle cx={PUCK_CX} cy={PUCK_CY} r="140" fill="url(#puckGlow)"/>

          {/* Deposit puck — green filled circle with dollar icon */}
          <circle cx={PUCK_CX} cy={PUCK_CY} r={PUCK_R}
                  fill="url(#puckBg)"
                  stroke="rgba(46,145,67,0.3)" strokeWidth="6"/>
          <circle cx={PUCK_CX} cy={PUCK_CY} r={PUCK_R - 3}
                  fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
          {/* Dashed orbit ring around puck */}
          <circle cx={PUCK_CX} cy={PUCK_CY} r={PUCK_R + 14}
                  fill="none" stroke="#2e9143" strokeOpacity="0.35"
                  strokeDasharray="2 6" strokeWidth="1.2"
                  className="hi3-puck-orbit"/>

          {/* Dollar sign icon — bold, white, centered in puck */}
          <text x={PUCK_CX} y={PUCK_CY + 14}
                textAnchor="middle"
                fontFamily="'Montserrat', sans-serif"
                fontWeight="700"
                fontSize="48"
                fill="#fff"
                letterSpacing="-0.02em">
            $
          </text>

          {/* Connector down to splitter hub */}
          <line x1={PUCK_CX} y1={PUCK_CY + PUCK_R + 6}
                x2={PUCK_CX} y2={HUB_Y - 6}
                stroke="#cfdadc" strokeWidth="1.2" strokeDasharray="3 5"/>

          {/* Splitter hub */}
          <circle cx={PUCK_CX} cy={HUB_Y} r="7"
                  fill="#fff" stroke="#2e9143" strokeWidth="2"/>
          <circle cx={PUCK_CX} cy={HUB_Y} r="3"
                  fill="#2e9143"/>

          {/* Flow paths from hub to vessels */}
          {tiers.map((t, i) => {
            const cx = tierCx(i);
            const d = `M ${PUCK_CX} ${HUB_Y + 4}
                       C ${PUCK_CX} ${HUB_Y + 38},
                         ${cx} ${HUB_Y + 38},
                         ${cx} ${VESSEL_TOP - 6}`;
            const strokeW = 1.5 + (cur.pcts[t.key] / 18);
            return (
              <g key={t.key}>
                {/* halo */}
                <path d={d} fill="none"
                      stroke={t.color} strokeOpacity="0.16"
                      strokeWidth={strokeW + 5} strokeLinecap="round"
                      style={{transition: "stroke-width .9s cubic-bezier(.2,.6,.2,1)"}}/>
                {/* main line */}
                <path d={d} fill="none"
                      stroke={t.color} strokeOpacity="0.7"
                      strokeWidth={strokeW} strokeLinecap="round"
                      style={{transition: "stroke-width .9s cubic-bezier(.2,.6,.2,1)"}}/>
                {/* arrow tip */}
                <circle cx={cx} cy={VESSEL_TOP - 6} r="3.2"
                        fill={t.color}/>
              </g>
            );
          })}

          {/* Vessels */}
          {tiers.map((t, i) => {
            const x = startX + i * (VESSEL_W + GAP);
            const fillH = Math.min(VESSEL_H, VESSEL_H * (cur.pcts[t.key] / 50));
            const fillY = VESSEL_BOTTOM - fillH;
            return (
              <g key={t.key}>
                <rect x={x} y={VESSEL_TOP} width={VESSEL_W} height={VESSEL_H}
                      rx="8" fill="#fff" stroke="#e1e5ec" strokeWidth="1.2"/>
                {/* tick marks */}
                {[0.25, 0.5, 0.75].map((p, k) => (
                  <line key={k}
                        x1={x + 4} x2={x + 9}
                        y1={VESSEL_BOTTOM - VESSEL_H * p}
                        y2={VESSEL_BOTTOM - VESSEL_H * p}
                        stroke="#cfdadc" strokeWidth="1"/>
                ))}
                <clipPath id={`clip-${t.key}-${idx}`}>
                  <rect x={x} y={VESSEL_TOP} width={VESSEL_W} height={VESSEL_H} rx="8"/>
                </clipPath>
                <rect x={x} y={fillY} width={VESSEL_W} height={fillH}
                      rx="8"
                      fill={`url(#g-${t.key})`}
                      clipPath={`url(#clip-${t.key}-${idx})`}
                      style={{transition: "y .9s cubic-bezier(.2,.6,.2,1), height .9s cubic-bezier(.2,.6,.2,1)"}}/>
              </g>
            );
          })}
        </svg>

        {/* HTML overlay */}
        <div className="hi3-overlay">
          {/* Floating deposit chip — above puck, gives the $ amount + source */}
          <div className="hi3-chip" key={`chip-${idx}`}>
            <span className="hi3-chip-dot"></span>
            <span className="hi3-chip-amt">${cur.depAmt.toLocaleString()}</span>
            <span className="hi3-chip-sep">·</span>
            <span className="hi3-chip-src">{cur.depName}</span>
          </div>

          {/* Auto-split label, sits to the right of hub */}
          <div className="hi3-hub-tag">Auto-split engine</div>

          {/* Tier % labels under vessels — clean two-line: % / name */}
          <div className="hi3-tier-row">
            {tiers.map((t, i) => (
              <div key={t.key} className="hi3-tier-cell"
                   style={{
                     left:  `${(startX + i * (VESSEL_W + GAP)) / W * 100}%`,
                     width: `${VESSEL_W / W * 100}%`,
                   }}>
                <div className="hi3-tier-pct" style={{color: t.color}} key={`pct-${idx}-${t.key}`}>
                  {cur.pcts[t.key]}%
                </div>
                <div className="hi3-tier-name">{t.short}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Caption strip — explains what's happening */}
      <div className="hi3-caption">
        <div className="hi3-caption-icon">
          <svg viewBox="0 0 20 20" width="14" height="14" fill="none">
            <path d="M10 2 L10 18 M2 10 L18 10" stroke="#2e9143" strokeWidth="1.6" strokeLinecap="round"/>
            <circle cx="10" cy="10" r="8" stroke="#2e9143" strokeWidth="1.4" strokeOpacity="0.4"/>
          </svg>
        </div>
        <div className="hi3-caption-text">
          <strong>Every deposit auto-splits into 5 reserves.</strong>
          {" "}Tax goes to tax. Growth goes to growth. You always know what's yours, what's the IRS's, and what keeps the business running.
        </div>
      </div>

      {/* Footer */}
      <div className="hi3-footer">
        <span className="hi3-footer-dot"></span>
        <span>Auto-rebalance running</span>
        <span className="hi3-counter">scenario {String(idx + 1).padStart(2,"0")} / {String(scenarios.length).padStart(2,"0")}</span>
      </div>
    </div>
  );
}

window.HeroIllustration = HeroIllustration;