// hero.jsx — three hero variants

const useReveal = (ref, opts) => {
  React.useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          el.classList.add("in");
          if (opts && opts.once) io.unobserve(el);
        } else if (!opts || !opts.once) {
          // keep it
        }
      });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
};

const TimeChip = () => {
  const [t, setT] = React.useState("");
  React.useEffect(() => {
    const tick = () => {
      const d = new Date();
      try {
        const fmt = new Intl.DateTimeFormat("en-GB", { hour:"2-digit", minute:"2-digit", second:"2-digit", hour12:false, timeZone: "Asia/Tbilisi" });
        setT(fmt.format(d));
      } catch (err) {
        const fmt = new Intl.DateTimeFormat("en-GB", { hour:"2-digit", minute:"2-digit", second:"2-digit", hour12:false });
        setT(fmt.format(d));
      }
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <span className="timechip">
      <span style={{display:"inline-block",width:6,height:6,borderRadius:99,background:"#23c55e",marginRight:6,verticalAlign:"middle"}}/>
      TBILISI {t} · OPEN
    </span>
  );
};

// ----- Variant A: editorial split with massive type + signature

const HeroA = () => {
  const stage = React.useRef(null);
  useReveal(stage, { once: true });
  return (
    <section className="heroA" data-screen-label="01 Hero (A)">
      <div className="wrap">
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:24}}>
          <span className="pill"><span style={{width:6,height:6,borderRadius:99,background:"var(--accent)"}}/>AVAILABLE — 2 SLOTS · Q3 2026</span>
          <TimeChip/>
        </div>

        <div ref={stage} className="typestage" style={{position:"relative"}}>
          <div className="display" style={{position:"relative"}}>
            <div className="word"><span style={{transitionDelay:".05s"}}>WE&nbsp;BUILD</span></div>
            <br/>
            <div className="word"><span style={{transitionDelay:".15s"}}>WEBSITES,</span></div>{" "}
            <div className="word"><span style={{transitionDelay:".25s"}}>AI&nbsp;</span></div>
            <br/>
            <div className="word"><span style={{transitionDelay:".35s"}}>SYSTEMS</span></div>{" "}
            <span className="serif" style={{fontSize:".82em",fontWeight:400,verticalAlign:"baseline",color:"var(--accent)"}}>
              <div className="word"><span style={{transitionDelay:".5s"}}>&amp;&nbsp;the&nbsp;</span></div>
              <div className="word"><span style={{transitionDelay:".58s"}}>quiet&nbsp;</span></div>
              <div className="word"><span style={{transitionDelay:".66s"}}>parts&nbsp;</span></div>
            </span>
            <br/>
            <span className="serif" style={{fontSize:".82em",fontWeight:400,verticalAlign:"baseline",color:"var(--accent)"}}>
              <div className="word"><span style={{transitionDelay:".74s"}}>that&nbsp;make&nbsp;them&nbsp;fast.</span></div>
            </span>
          </div>
        </div>

        <div style={{display:"grid",gridTemplateColumns:"1.4fr 1fr 1fr",gap:32,marginTop:48,paddingTop:24,borderTop:"1px solid var(--hair)"}}>
          <div>
            <div className="h-eyebrow" style={{marginBottom:10}}>(A) — Studio note</div>
            <div style={{fontSize:18,lineHeight:1.45,letterSpacing:"-.005em",maxWidth:"40ch"}}>
              Code-pal is a small studio for founders who care how the page loads, how the agent answers, and how the link reads in search. We ship in weeks, not quarters.
            </div>
          </div>
          <div>
            <div className="h-eyebrow" style={{marginBottom:10}}>(B) — Practice</div>
            <ul style={{listStyle:"none",padding:0,margin:0,fontSize:14,lineHeight:1.85,color:"var(--ink-2)"}}>
              <li style={{display:"flex",justifyContent:"space-between",borderBottom:"1px solid var(--hair-2)",padding:"4px 0"}}><span>Web development</span><span className="mono" style={{fontSize:11,opacity:.55}}>—01</span></li>
              <li style={{display:"flex",justifyContent:"space-between",borderBottom:"1px solid var(--hair-2)",padding:"4px 0"}}><span>Web design / UI</span><span className="mono" style={{fontSize:11,opacity:.55}}>—02</span></li>
              <li style={{display:"flex",justifyContent:"space-between",borderBottom:"1px solid var(--hair-2)",padding:"4px 0"}}><span>SEO &amp; performance</span><span className="mono" style={{fontSize:11,opacity:.55}}>—03</span></li>
              <li style={{display:"flex",justifyContent:"space-between",padding:"4px 0"}}><span>AI automations &amp; systems</span><span className="mono" style={{fontSize:11,opacity:.55}}>—04</span></li>
            </ul>
          </div>
          <div style={{display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"flex-start",gap:14}}>
            <div className="h-eyebrow">(C) — Begin</div>
            <a href="#contact" className="btn"><span className="dot"/> Start a project</a>
            <a href="#work" className="btn ghost">See selected work →</a>
            <div className="mono" style={{fontSize:11,opacity:.6,marginTop:6}}>+995 557 470 982</div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ----- Variant B: full-bleed showreel feel — type morphs in/out across 3 lines

const HeroB = () => {
  const [i, setI] = React.useState(0);
  const verbs = ["build","ship","tune","grow","automate"];
  React.useEffect(() => {
    const id = setInterval(() => setI(x => (x+1) % verbs.length), 2400);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="heroB" data-screen-label="01 Hero (B)" style={{padding:"120px 0 80px"}}>
      <div className="wrap" style={{textAlign:"center"}}>
        <div className="h-eyebrow" style={{marginBottom:18}}>◐ CODE-PAL — INDEPENDENT WEB STUDIO · TBILISI / REMOTE</div>
        <div style={{fontWeight:800,letterSpacing:"-.05em",lineHeight:.9,fontSize:"clamp(64px,14vw,200px)"}}>
          Studios&nbsp;hire&nbsp;agencies.<br/>
          Founders&nbsp;hire&nbsp;us<br/>
          to&nbsp;
          <span style={{display:"inline-block",position:"relative",height:".88em",width:"3.4ch",verticalAlign:"baseline",overflow:"hidden"}}>
            {verbs.map((v,k)=>(
              <span key={v} className="serif" style={{
                position:"absolute",left:0,right:0,color:"var(--accent)",fontWeight:400,
                transform: k===i?"translateY(0)":(k===((i-1+verbs.length)%verbs.length)?"translateY(-100%)":"translateY(110%)"),
                opacity: k===i?1:0,
                transition:"transform .7s cubic-bezier(.2,.8,.1,1), opacity .4s"
              }}>{v}</span>
            ))}
          </span>.
        </div>
        <div style={{maxWidth:680,margin:"36px auto 0",fontSize:18,lineHeight:1.5,color:"var(--ink-2)"}}>
          Web development, UI, SEO and AI automations — for teams that want one studio to ship the whole thing, fast and quiet.
        </div>
        <div style={{display:"flex",gap:12,justifyContent:"center",marginTop:28,flexWrap:"wrap"}}>
          <a href="#work" className="btn"><span className="dot"/> See selected work</a>
          <a href="#contact" className="btn ghost">Book intro call →</a>
        </div>
        <div style={{marginTop:48,display:"flex",justifyContent:"center",gap:48,flexWrap:"wrap",fontFamily:"'JetBrains Mono',monospace",fontSize:11,letterSpacing:".12em",color:"var(--mute)"}}>
          <span>● 25+ SHIPPED</span><span>● 12 INDUSTRIES</span><span>● SINCE 2021</span><span>● TURNAROUND ≈ 4 WK</span>
        </div>
      </div>
    </section>
  );
};

// ----- Variant C: brutalist editorial — pure black, hairline grid

const HeroC = () => (
  <section className="heroC" data-screen-label="01 Hero (C)" style={{padding:"36px 0 0"}}>
    <div className="wrap">
      <div style={{display:"grid",gridTemplateColumns:"repeat(12,1fr)",gap:18,paddingTop:8,paddingBottom:24,borderBottom:"1px solid var(--hair)"}}>
        <div style={{gridColumn:"1 / span 4"}}>
          <div className="h-eyebrow">⌁ MEMO 001 — TO PROSPECTIVE CLIENT</div>
          <div style={{marginTop:14,fontSize:14,lineHeight:1.55,color:"var(--ink-2)"}}>
            What follows is a one-page portfolio. Read it like a contract: every line is something we believe, can do, and have shipped.
          </div>
        </div>
        <div style={{gridColumn:"5 / span 4",display:"flex",flexDirection:"column",justifyContent:"flex-end",fontSize:11,fontFamily:"'JetBrains Mono',monospace",letterSpacing:".08em",color:"var(--mute)",lineHeight:1.7}}>
          <div style={{display:"flex",justifyContent:"space-between"}}><span>STUDIO</span><span>CODE-PAL</span></div>
          <div style={{display:"flex",justifyContent:"space-between"}}><span>FOUNDED</span><span>2021</span></div>
          <div style={{display:"flex",justifyContent:"space-between"}}><span>HQ</span><span>TBILISI / REMOTE</span></div>
          <div style={{display:"flex",justifyContent:"space-between"}}><span>HEADCOUNT</span><span>5 + NETWORK</span></div>
        </div>
        <div style={{gridColumn:"9 / span 4",display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"flex-end",gap:8}}>
          <a href="#contact" className="btn"><span className="dot"/> Engage studio</a>
          <span className="mono" style={{fontSize:11,opacity:.6}}>↘ scroll · 14 sections</span>
        </div>
      </div>

      <div style={{padding:"40px 0 8px",position:"relative"}}>
        <div style={{fontWeight:900,letterSpacing:"-.06em",lineHeight:.82,fontSize:"clamp(56px,16vw,260px)"}}>
          CODE—<span style={{color:"var(--accent)"}}>PAL</span><span className="serif" style={{fontWeight:400,fontStyle:"italic",fontSize:".5em",verticalAlign:"super",color:"var(--mute)",marginLeft:".15em"}}>™</span>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(12,1fr)",gap:18,marginTop:14,borderTop:"1px solid var(--hair)",paddingTop:14}}>
          <div style={{gridColumn:"1 / span 7",fontSize:"clamp(22px,2.6vw,40px)",letterSpacing:"-.02em",fontWeight:500,lineHeight:1.1}}>
            A small studio with a long memory: web development, AI systems, SEO, and the <span className="serif" style={{color:"var(--accent)"}}>refinement</span> nobody else stays late for.
          </div>
          <div style={{gridColumn:"9 / span 4",display:"flex",flexDirection:"column",gap:6,fontFamily:"'JetBrains Mono',monospace",fontSize:11,letterSpacing:".06em",color:"var(--ink-2)"}}>
            <div style={{display:"flex",justifyContent:"space-between",borderBottom:"1px solid var(--hair-2)",padding:"6px 0"}}><span>(01) WEB DEV</span><span>SVELTE · NEXT</span></div>
            <div style={{display:"flex",justifyContent:"space-between",borderBottom:"1px solid var(--hair-2)",padding:"6px 0"}}><span>(02) WEB DESIGN</span><span>FIGMA · CSS</span></div>
            <div style={{display:"flex",justifyContent:"space-between",borderBottom:"1px solid var(--hair-2)",padding:"6px 0"}}><span>(03) SEO + PERF</span><span>CWV · EAT</span></div>
            <div style={{display:"flex",justifyContent:"space-between",padding:"6px 0"}}><span>(04) AI SYSTEMS</span><span>RAG · AGENTS</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.HeroA = HeroA; window.HeroB = HeroB; window.HeroC = HeroC; window.useReveal = useReveal; window.TimeChip = TimeChip;