/* Website being built — code typing in + preview appearing, loops. */
const { useState: useStateW, useEffect: useEffectW } = React;

const htmlLines = [
  { t: "<section class=\"hero\">", i: 0 },
  { t: "  <h1>Welcome to ", i: 2 },
  { t: "Kavya's Furniture", i: 2, hl: true },
  { t: "</h1>", i: 2 },
  { t: "  <button>Shop Now</button>", i: 2 },
  { t: "</section>", i: 0 },
];

function WebsiteStage() {
  const [step, setStep] = useStateW(0);
  useEffectW(() => {
    const t = setInterval(() => setStep(s => (s + 1) % 8), 1400);
    return () => clearInterval(t);
  }, []);
  const linesShown = Math.min(step, htmlLines.length);

  return (
    <div className="web-stage">
      <div className="web-editor">
        <div className="web-tabs">
          <div className="web-dot r" /><div className="web-dot y" /><div className="web-dot g" />
          <div className="web-file">index.html</div>
        </div>
        <div className="web-code">
          {htmlLines.slice(0, linesShown).map((l, i) => (
            <div key={i} className="code-line" style={{ paddingLeft: `${l.i * 10}px` }}>
              <span className="line-num">{i + 1}</span>
              <span className={l.hl ? "tok-str" : "tok"}>{l.t}</span>
            </div>
          ))}
          {linesShown < htmlLines.length && (
            <div className="code-line"><span className="line-num">{linesShown + 1}</span><span className="caret" style={{ height: 14 }}></span></div>
          )}
        </div>
      </div>
      <div className="web-preview">
        <div className="browser-bar">
          <div className="web-dot r" /><div className="web-dot y" /><div className="web-dot g" />
          <div className="url">kavyafurniture.in</div>
        </div>
        <div className="browser-page">
          {linesShown >= 1 && <div className="pv-nav"><span>K</span><i /><i /><i /></div>}
          {linesShown >= 4 && (
            <div className="pv-hero">
              <div className="pv-h1">Welcome to <em>Kavya's Furniture</em></div>
              <div className="pv-sub" />
              {linesShown >= 5 && <div className="pv-btn">Shop Now</div>}
              {linesShown >= 6 && <div className="pv-img" />}
            </div>
          )}
        </div>
      </div>
      <style>{`
        .web-stage { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1.1fr; gap: 10px; padding: 14px; font-family: var(--f-mono); }
        .web-editor, .web-preview { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
        html.dark .web-editor, html.dark .web-preview { background: var(--paper-3); }
        .web-tabs, .browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
        .web-dot { width: 9px; height: 9px; border-radius: 50%; }
        .web-dot.r { background: #f87171; } .web-dot.y { background: #fbbf24; } .web-dot.g { background: #10b981; }
        .web-file { margin-left: 8px; font-size: 11px; color: var(--muted); }
        .url { margin-left: 10px; font-size: 11px; color: var(--muted); flex: 1; text-align: center; background: var(--paper-2); padding: 3px 8px; border-radius: 6px; }
        .web-code { padding: 10px 8px; font-size: 11px; line-height: 1.7; color: var(--ink-2); flex: 1; }
        .code-line { display: flex; gap: 10px; white-space: nowrap; }
        .line-num { color: var(--muted-2); width: 14px; text-align: right; flex-shrink: 0; }
        .tok { color: var(--ink); }
        .tok-str { color: var(--accent); }

        .browser-page { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; font-family: var(--f-sans); }
        .pv-nav { display: flex; gap: 6px; align-items: center; }
        .pv-nav span { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 600; font-size: 10px; }
        .pv-nav i { width: 22px; height: 6px; background: var(--line); border-radius: 3px; }
        .pv-nav i:last-child { flex: 1; }
        .pv-hero { display: flex; flex-direction: column; gap: 10px; animation: fadein .4s ease both; }
        .pv-h1 { font-size: 17px; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
        .pv-h1 em { color: var(--accent-ink); background: var(--accent); padding: 0 4px; border-radius: 4px; font-style: normal; }
        .pv-sub { height: 5px; background: var(--line); border-radius: 3px; width: 80%; }
        .pv-btn { align-self: flex-start; padding: 7px 14px; background: var(--ink); color: var(--paper); border-radius: 999px; font-size: 11px; animation: fadein .3s ease both; }
        .pv-img { flex: 1; min-height: 60px; background: linear-gradient(135deg, var(--paper-2), var(--paper-3)); border-radius: 8px; animation: fadein .4s ease both; }
        @keyframes fadein { from { opacity: 0; transform: translateY(4px);} to { opacity:1; transform: none; } }
      `}</style>
    </div>
  );
}

window.WebsiteStage = WebsiteStage;