// HeroAuto.jsx — looping 4-act hero automation
// messy tasks → AI organizes → executes (tasks complete) → workflow-complete summary
function HeroAuto() {
  const TASKS = [
    { id: 1, label: "Vague headline",     done: "Message clarified", icon: "ri-text",              badge: 1, mx: 24,  my: 22,  mr: -3 },
    { id: 2, label: "Buried offer",       done: "Offer surfaced",   icon: "ri-stack-line",        badge: 1, mx: 300, my: 60,  mr: 3 },
    { id: 3, label: "Dated layout",       done: "Redesigned",       icon: "ri-layout-3-line",     badge: 1, mx: 18,  my: 250, mr: 4 },
    { id: 4, label: "Weak hero",          done: "Hero rebuilt",     icon: "ri-image-2-line",      badge: 1, mx: 300, my: 196, mr: -2 },
    { id: 5, label: "No clear CTA",       done: "CTA wired",        icon: "ri-cursor-line",       badge: 1, mx: 6,   my: 130, mr: 2 },
    { id: 6, label: "Slow on mobile",     done: "Mobile tuned",     icon: "ri-smartphone-line",   badge: 1, mx: 60,  my: 330, mr: -4 },
    { id: 7, label: "Generic stock",      done: "Brand visuals",    icon: "ri-palette-line",      badge: 1, mx: 312, my: 312, mr: 4 },
    { id: 8, label: "Thin trust signals", done: "Proof added",      icon: "ri-shield-star-line",  badge: 1, mx: 22,  my: 416, mr: 3 },
  ];
  const STEPS = [
    { label: "Reading your brand",   icon: "ri-search-eye-line" },
    { label: "Structuring the message",  icon: "ri-node-tree" },
    { label: "Designing sections", icon: "ri-layout-3-line" },
    { label: "Building responsive",     icon: "ri-code-s-slash-line" },
    { label: "Wiring the path to inquiry", icon: "ri-git-branch-line" },
  ];

  const [organized, setOrganized] = useState(false);
  const [step, setStep] = useState(-1);
  const [doneCount, setDoneCount] = useState(0);
  const [summary, setSummary] = useState(false);

  useEffect(() => {
    let timers = [];
    const at = (ms, fn) => timers.push(setTimeout(fn, ms));
    const run = (offset) => {
      offset = offset || 0;
      setOrganized(false); setStep(-1); setDoneCount(0); setSummary(false);
      at(1700 + offset, () => { setOrganized(true); });
      at(2050 + offset, () => setStep(0));   // reading context
      at(2750 + offset, () => setStep(1));   // organizing tasks
      at(3500 + offset, () => setStep(2));   // executing workflows
      // tasks complete one by one
      for (let i = 1; i <= TASKS.length; i++) at(3800 + offset + i * 250, () => setDoneCount(i));
      at(4500 + offset, () => setStep(3));   // taking action
      at(5300 + offset, () => setStep(4));   // routing exceptions
      at(6300 + offset, () => { setSummary(true); });
      at(10200 + offset, () => run(0));      // loop (normal cadence after first pass)
    };
    run(500);   // first load: hold the opening frame ~0.5s longer so it's readable
    return () => timers.forEach(clearTimeout);
  }, []);

  // connector endpoints — fan into the vertically-centered panel
  const connY = (i) => 150 + i * 30;

  return (
    <div className="hero-visual">
    {/* light beam reflecting at the top & bottom edges of the panel */}
    <div className="hl-top" aria-hidden="true" />
    <div className="hl-bottom" aria-hidden="true" />
    <div className="auto-frame-wrap">
    <div className="auto-frame">
    <div className="auto-stage">
      <div className="haze-bloom" style={{ opacity: 0.3 }} />

      {/* connectors */}
      <svg className="auto-svg" viewBox="0 0 560 500" preserveAspectRatio="none">
        <defs>
          <linearGradient id="autoGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#F26422" stopOpacity="0" />
            <stop offset="55%" stopColor="#FF7E3D" stopOpacity="0.9" />
            <stop offset="100%" stopColor="#8C6BF0" stopOpacity="0.9" />
          </linearGradient>
        </defs>
        {TASKS.map((t, i) => {
          const sy = 36 + i * 50 + 23;
          const ey = connY(i);
          return <path key={t.id} className={`auto-conn ${organized && !summary ? "draw" : ""}`}
            style={{ transitionDelay: `${i * 60}ms` }}
            d={`M232,${sy} C268,${sy} 268,${ey} 300,${ey}`} />;
        })}
      </svg>

      {/* task cards */}
      {TASKS.map((t, i) => {
        const isDone = i < doneCount;
        const acc = i % 2 === 0 ? ["#F26422", "#EB6D20"] : ["#8C6BF0", "#6A40D9"];
        const transform = organized
          ? `translate(0px, ${36 + i * 50}px) rotate(0deg)`
          : `translate(${t.mx}px, ${t.my}px) rotate(${t.mr}deg)`;
        return (
          <div key={t.id} className={`auto-card ${isDone ? "is-done" : ""} ${summary ? "is-hidden" : ""}`}
            style={{ transform, "--ic-a": acc[0], "--ic-b": acc[1] }}>
            <span className="ac-ic">
              <i className={`ic-base ${t.icon}`} />
              <i className="ic-done ri-check-line" />
            </span>
            <span className="ac-label">
              <span className="lb-base">{t.label}</span>
              <span className="lb-done">{t.done}</span>
            </span>
            <span className="ac-dot" />
            <span className={`auto-badge ${organized ? "gone" : ""}`}>{t.badge}</span>
          </div>
        );
      })}

      {/* AI panel */}
      <div className={`ai-panel ${organized ? "" : "enter"} ${summary ? "is-hidden" : ""}`} style={summary ? { opacity: 0, transform: "translateY(-50%) scale(.96)" } : undefined}>
        <div className="ai-panel__head">
          <i className="sparkle ri-sparkling-2-fill" />
          <span className="title">Siteworks Studio</span>
          <span className="live" />
        </div>
        {STEPS.map((s, i) => (
          <div key={s.label} className={`ai-step ${step === i ? "active" : ""} ${step > i ? "passed" : ""}`}>
            <i className={`as-ic ${step > i ? "ri-check-line" : s.icon}`} />
            <span className="as-label">{s.label}</span>
          </div>
        ))}
      </div>

      {/* completion summary */}
      <div className={`summary-card ${summary ? "show" : ""}`}>
        <div className="summary-head">
          <span className="chk"><i className="ri-check-line" /></span>
          <span className="h">Your concept is ready</span>
        </div>
        <div className="summary-row"><i className="ri-text" /><span className="txt">Hero &amp; message rebuilt</span></div>
        <div className="summary-row"><i className="ri-layout-3-line" /><span className="txt">5 sections designed</span></div>
        <div className="summary-row"><i className="ri-cursor-line" /><span className="txt">Inquiry flow wired in</span></div>
        <div className="summary-row approve"><i className="ri-eye-line" /><span className="txt">3 things to review with you</span></div>
        <div className="summary-tagline">Underselling, fixed. <span className="gradient-text">You finally look the part.</span></div>
      </div>
    </div>
    </div>

      {/* floating completed chips — rendered outside the clipping frame so they peek past its edges */}
      <div className={`float-chip ${summary ? "show" : ""}`} style={{ right: -28, top: 150, transform: summary ? "translateX(0)" : "translateX(30px)" }}>
        <i className="ri-checkbox-circle-fill" /><span className="fc-label">Concept ready</span>
      </div>
      <div className={`float-chip ${summary ? "show" : ""}`} style={{ left: -34, bottom: 96, transform: summary ? "translateX(0)" : "translateX(-30px)" }}>
        <i className="ri-checkbox-circle-fill" /><span className="fc-label">Mobile-perfect</span>
      </div>
    </div>
    </div>
  );
}
Object.assign(window, { HeroAuto });