// sections.jsx — section components for Juan David's site

const Title = ({ roman, italic, mode }) => {
  if (mode === "roman") {
    return (
      <span className="display-rom">
        {roman} {italic && <span style={{color:"var(--bone-2)"}}>{italic}</span>}
      </span>
    );
  }
  return (
    <span className="display-rom">
      {roman} {italic && <em className="display" style={{fontStyle:"italic"}}>{italic}</em>}
    </span>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Top bar
function TopBar({ lang, setLang, copy }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", fn, {passive:true});
    fn();
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <header style={{
      position:"fixed", top:0, left:0, right:0, zIndex:50,
      padding:"18px var(--pad)",
      backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      background: scrolled ? "rgba(10,9,8,.72)" : "transparent",
      borderBottom: scrolled ? "1px solid var(--rule)" : "1px solid transparent",
      transition:"background .35s, backdrop-filter .35s, border-color .35s"
    }}>
      <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", gap:24, maxWidth:"var(--col)", margin:"0 auto"}}>
        <a href="#top" className="mono" style={{fontSize:12, letterSpacing:".08em"}}>
          <span style={{color:"var(--accent)"}}>●</span>
          &nbsp;&nbsp;JDCC
          <span style={{color:"var(--bone-3)"}}> — {lang === "es" ? "Contador & Desarrollador" : "Accountant & Developer"}</span>
        </a>
        <nav className="mono" style={{display:"flex", gap:22, fontSize:11, letterSpacing:".12em", textTransform:"uppercase"}}>
          {["tools","services","projects","studio","contact"].map(k => (
            <a key={k} href={`#${k}`} className="ulnk" style={{color:"var(--bone-2)"}}>{copy.nav[k]}</a>
          ))}
        </nav>
        <div style={{display:"flex", alignItems:"center", gap:0, border:"1px solid var(--rule-2)", borderRadius:999, padding:2}}>
          {["es","en"].map(l => (
            <button key={l} onClick={() => setLang(l)} className="mono"
              style={{
                appearance:"none", border:0, background: lang===l ? "var(--bone)" : "transparent",
                color: lang===l ? "var(--ink)" : "var(--bone-2)",
                padding:"6px 12px", borderRadius:999, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", cursor:"pointer", transition:"all .25s"
              }}>{l}</button>
          ))}
        </div>
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// HERO — restrained: name as a small mono signature, statement leads
function Hero({ copy, mode }) {
  const [time, setTime] = React.useState(new Date());
  React.useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const bog = new Date(time.toLocaleString("en-US", {timeZone:"America/Bogota"}));
  const hh = String(bog.getHours()).padStart(2,"0");
  const mm = String(bog.getMinutes()).padStart(2,"0");
  const ss = String(bog.getSeconds()).padStart(2,"0");

  return (
    <section id="top" style={{minHeight:"100vh", display:"flex", flexDirection:"column", justifyContent:"space-between", paddingTop:140, paddingBottom:40, position:"relative"}}>
      <div className="wrap" style={{flex:1, display:"flex", flexDirection:"column", justifyContent:"center", gap:48}}>
        <div className="rule"></div>

        {/* Top meta row: signature + clock */}
        <div data-reveal className="in" style={{display:"flex", justifyContent:"space-between", flexWrap:"wrap", gap:24}}>
          <span className="mono" style={{fontSize:11, letterSpacing:".18em", textTransform:"uppercase", color:"var(--bone-3)"}}>
            <span style={{color:"var(--accent)"}}>◆</span>&nbsp;&nbsp;{copy.hero.eyebrow}
          </span>
          <span className="mono tnum" style={{fontSize:11, letterSpacing:".18em", color:"var(--bone-3)"}}>
            BOG · {hh}:{mm}:<span style={{color:"var(--accent)"}}>{ss}</span>
          </span>
        </div>

        {/* Statement leads, not name */}
        <h1 data-reveal style={{margin:0, fontSize:"clamp(40px,7.4vw,104px)", lineHeight:1.0, fontWeight:400, letterSpacing:"-0.02em", maxWidth:"18ch"}}>
          <Title roman={copy.hero.lineA.roman} italic={copy.hero.lineA.italic} mode={mode}/><br/>
          <Title roman={copy.hero.lineB.roman} italic={copy.hero.lineB.italic} mode={mode}/>
        </h1>

        {/* Tagline + meta side */}
        <div data-reveal style={{display:"grid", gridTemplateColumns:"1fr auto", gap:48, alignItems:"end"}}>
          <p style={{margin:0, fontSize:"clamp(15px,1.2vw,17px)", lineHeight:1.55, maxWidth:"58ch", color:"var(--bone-2)"}}>
            {copy.hero.tagline}
          </p>
          <div className="mono" style={{textAlign:"right", fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color:"var(--bone-3)", lineHeight:1.9, whiteSpace:"nowrap"}}>
            {copy.hero.based}<br/>
            {copy.hero.since}<br/>
            <span style={{color:"var(--accent)"}}>● {copy.hero.status}</span>
          </div>
        </div>
      </div>

      {/* Bottom row: signature + socials + scroll */}
      <div className="wrap" style={{paddingTop:24}}>
        <div className="rule" style={{marginBottom:18}}></div>
        <div data-reveal style={{display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:24}}>
          <div className="mono" style={{fontSize:11, letterSpacing:".18em", textTransform:"uppercase", color:"var(--bone-2)"}}>
            <span style={{color:"var(--bone-3)"}}>—— </span>{copy.hero.signature}
          </div>
          <div style={{display:"flex", gap:24, alignItems:"center", flexWrap:"wrap"}}>
            {copy.hero.socials.map((s,i) => {
              const external = s.href && /^https?:/.test(s.href);
              return (
                <a key={i} href={s.href || "#contact"}
                   target={external ? "_blank" : undefined}
                   rel={external ? "noopener noreferrer" : undefined}
                   className="mono ulnk" style={{fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color:"var(--bone-2)"}}>
                  <span style={{color:"var(--bone-3)"}}>{s.label}/</span>{s.value}
                </a>
              );
            })}
            <span className="mono" style={{fontSize:10, letterSpacing:".24em", textTransform:"uppercase", color:"var(--bone-3)", marginLeft:12}}>↓ {copy.hero.scroll}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// TOOLS — calculator/utility entry-points (traffic drivers)
function Tools({ copy, mode }) {
  return (
    <section id="tools" className="rule">
      <SectionHead eyebrow={copy.tools.eyebrow} title={copy.tools.title} lede={copy.tools.lede} mode={mode}/>
      <div className="wrap">
        <div data-reveal-stagger style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:0, borderTop:"1px solid var(--rule-2)", borderLeft:"1px solid var(--rule-2)"}}>
          {copy.tools.cards.map((c,i) => {
            const live = c.state === "live";
            return (
              <a key={c.num} href={live ? (c.href || "#") : undefined} target={c.href && c.href.startsWith("tools/") ? "_blank" : undefined} rel={c.href && c.href.startsWith("tools/") ? "noopener" : undefined} style={{
                padding:"28px 24px", borderRight:"1px solid var(--rule-2)", borderBottom:"1px solid var(--rule-2)",
                minHeight:240, display:"flex", flexDirection:"column", justifyContent:"space-between", gap:16,
                background:"transparent", color: live ? "var(--bone)" : "var(--bone-3)", textDecoration:"none",
                transition:"background .3s, color .3s", cursor: live ? "pointer" : "not-allowed",
                pointerEvents: live ? "auto" : "none",
              }} onMouseEnter={(e)=>{ if(live) e.currentTarget.style.background="rgba(244,240,232,.03)"}} onMouseLeave={(e)=>{ e.currentTarget.style.background="transparent" }}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                  <span className="mono" style={{fontSize:11, letterSpacing:".14em", color:"var(--accent)"}}>{c.num}</span>
                  <span className="mono" style={{fontSize:9, letterSpacing:".22em", textTransform:"uppercase", padding:"4px 8px", border:"1px solid", borderColor: live ? "var(--accent)" : "var(--rule-2)", color: live ? "var(--accent)" : "var(--bone-3)"}}>
                    {live ? copy.tools.live : copy.tools.soon}
                  </span>
                </div>
                <div>
                  <h3 className="display-rom" style={{margin:"0 0 10px", fontSize:24, lineHeight:1.1, color: live ? "var(--bone)" : "var(--bone-2)"}}>{c.title}</h3>
                  <p style={{margin:0, fontSize:13, lineHeight:1.55, color:"var(--bone-3)"}}>{c.body}</p>
                </div>
                <div className="mono" style={{fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color: live ? "var(--bone-2)" : "var(--bone-3)"}}>
                  {live ? <span>{copy.tools.cta} →</span> : <span>—</span>}
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// STUDIO — placeholder for the upcoming venture
function Studio({ copy, mode }) {
  return (
    <section id="studio" className="rule">
      <SectionHead eyebrow={copy.studio.eyebrow} title={copy.studio.title} lede={copy.studio.lede} mode={mode}/>
      <div className="wrap" style={{display:"grid", gridTemplateColumns:"180px 1fr 1fr", gap:48, alignItems:"start"}}>
        <div></div>
        <div data-reveal style={{
          aspectRatio:"4 / 3",
          border:"1px dashed var(--rule-2)",
          display:"flex", flexDirection:"column", justifyContent:"center", alignItems:"center", gap:14,
          background:"radial-gradient(ellipse at center, rgba(244,240,232,.04), transparent 70%)",
          position:"relative",
        }}>
          <span className="mono" style={{fontSize:10, letterSpacing:".24em", textTransform:"uppercase", color:"var(--accent)", position:"absolute", top:18, left:18}}>● {copy.studio.placeholderSub}</span>
          <span className="mono" style={{fontSize:10, letterSpacing:".24em", textTransform:"uppercase", color:"var(--bone-3)", position:"absolute", top:18, right:18}}>WORDMARK / 320×120</span>
          <span className="display" style={{fontStyle:"italic", fontSize:"clamp(36px,5vw,64px)", color:"var(--bone-2)", textAlign:"center", lineHeight:1}}>{copy.studio.placeholder}</span>
          <span className="mono" style={{fontSize:11, letterSpacing:".18em", textTransform:"uppercase", color:"var(--bone-3)"}}>—— BRAND TBD</span>
        </div>
        <div data-reveal-stagger className="mono" style={{display:"flex", flexDirection:"column"}}>
          {copy.studio.bullets.map(([k,v],i) => (
            <div key={i} style={{padding:"18px 0", borderTop:"1px solid var(--rule)"}}>
              <div style={{fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color:"var(--accent)", marginBottom:6}}>{String(i+1).padStart(2,"0")} · {k}</div>
              <div style={{fontSize:14, color:"var(--bone-2)", lineHeight:1.5}}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SECTION HEAD (reusable)
function SectionHead({ eyebrow, title, lede, mode }) {
  return (
    <div className="wrap" style={{display:"grid", gridTemplateColumns:"180px 1fr", gap:48, marginBottom:64}}>
      <div className="mono" data-reveal style={{fontSize:11, letterSpacing:".18em", textTransform:"uppercase", color:"var(--bone-3)", paddingTop:14}}>
        {eyebrow}
      </div>
      <div data-reveal>
        <h2 style={{margin:0, fontSize:"clamp(40px,7vw,96px)", lineHeight:0.98}}>
          <Title roman={title.roman} italic={title.italic} mode={mode}/>
        </h2>
        {lede && (
          <p className="display-rom" style={{margin:"32px 0 0", fontSize:"clamp(18px,1.7vw,22px)", lineHeight:1.5, color:"var(--bone-2)", maxWidth:"68ch"}}>{lede}</p>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// ABOUT
function About({ copy, mode }) {
  return (
    <section id="about" className="rule">
      <div style={{paddingTop:"clamp(64px,8vw,128px)"}}>
        <SectionHead eyebrow={copy.about.eyebrow} title={copy.about.title} mode={mode}/>
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"180px 1fr 1fr", gap:48, alignItems:"start"}}>
          <div></div>
          <div data-reveal>
            <p className="display-rom" style={{margin:0, fontSize:"22px", lineHeight:1.5, color:"var(--bone)"}}>{copy.about.lede}</p>
            {copy.about.body.map((b,i) => (
              <p key={i} style={{margin:"22px 0 0", fontSize:16, lineHeight:1.65, color:"var(--bone-2)"}}>{b}</p>
            ))}
          </div>
          <div data-reveal-stagger className="mono" style={{display:"flex", flexDirection:"column", gap:0}}>
            {copy.about.bullets.map(([k,v],i) => (
              <div key={i} style={{padding:"18px 0", borderTop:"1px solid var(--rule)"}}>
                <div style={{fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color:"var(--accent)", marginBottom:6}}>{String(i+1).padStart(2,"0")} · {k}</div>
                <div style={{fontSize:13, color:"var(--bone-2)", lineHeight:1.5}}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SERVICES
function Services({ copy, mode }) {
  return (
    <section id="services" className="rule">
      <SectionHead eyebrow={copy.services.eyebrow} title={copy.services.title} lede={copy.services.lede} mode={mode}/>
      <div className="wrap">
        <div data-reveal-stagger style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:0, borderTop:"1px solid var(--rule-2)"}}>
          {copy.services.cards.map((c,i) => (
            <div key={c.id} style={{
              padding:"32px 28px", borderRight: (i%3!==2) ? "1px solid var(--rule)" : "none",
              borderBottom: i < 3 ? "1px solid var(--rule)" : "none",
              minHeight:240, display:"flex", flexDirection:"column", justifyContent:"space-between", gap:24,
              transition:"background .3s",
              cursor:"default"
            }} onMouseEnter={e => e.currentTarget.style.background="rgba(244,240,232,.02)"} onMouseLeave={e => e.currentTarget.style.background="transparent"}>
              <div className="mono" style={{fontSize:11, letterSpacing:".18em", color:"var(--accent)"}}>{c.id} /</div>
              <div>
                <h3 className="display-rom" style={{margin:"0 0 12px", fontSize:28, lineHeight:1.05}}>{c.title}</h3>
                <p style={{margin:0, fontSize:14, lineHeight:1.6, color:"var(--bone-2)"}}>{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// EXPERTISE
function Expertise({ copy, mode }) {
  return (
    <section id="expertise" className="rule">
      <SectionHead eyebrow={copy.expertise.eyebrow} title={copy.expertise.title} mode={mode}/>
      <div className="wrap">
        <div data-reveal-stagger style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:48}}>
          {copy.expertise.cols.map(col => (
            <div key={col.tag} style={{paddingTop:18, borderTop:"1px solid var(--bone)"}}>
              <div className="mono" style={{fontSize:11, letterSpacing:".18em", color:"var(--accent)", marginBottom:18}}>{col.tag}</div>
              <h3 className="display-rom" style={{margin:"0 0 28px", fontSize:34, lineHeight:1.05}}>{col.name}</h3>
              <ul style={{margin:0, padding:0, listStyle:"none"}}>
                {col.items.map((it,i) => (
                  <li key={i} className="mono" style={{padding:"12px 0", borderTop: i===0 ? "none" : "1px solid var(--rule)", fontSize:13, color:"var(--bone-2)", display:"flex", gap:12}}>
                    <span style={{color:"var(--bone-3)", minWidth:24}}>{String(i+1).padStart(2,"0")}</span>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PROJECTS
function Projects({ copy, mode }) {
  return (
    <section id="projects" className="rule">
      <SectionHead eyebrow={copy.projects.eyebrow} title={copy.projects.title} lede={copy.projects.lede} mode={mode}/>
      <div className="wrap">
        <div data-reveal-stagger style={{display:"flex", flexDirection:"column", gap:0}}>
          {copy.projects.cards.map((p,i) => (
            <a key={p.num} href="#contact" style={{
              display:"grid", gridTemplateColumns:"100px 200px 1fr 220px", gap:32, alignItems:"start",
              padding:"36px 0", borderTop:"1px solid var(--rule-2)",
              transition:"padding-left .35s cubic-bezier(.2,.7,.2,1), background .35s, color .35s",
              cursor:"default", color:"var(--bone)"
            }} onMouseEnter={e => {e.currentTarget.style.paddingLeft="24px"; e.currentTarget.style.background="rgba(244,240,232,.025)"}} onMouseLeave={e => {e.currentTarget.style.paddingLeft="0"; e.currentTarget.style.background="transparent"}}>
              <span className="mono" style={{fontSize:12, color:"var(--accent)", letterSpacing:".12em"}}>{p.num}</span>
              <span className="mono" style={{fontSize:11, color:"var(--bone-3)", letterSpacing:".14em", textTransform:"uppercase", paddingTop:4}}>{p.sector}</span>
              <div>
                <h3 className="display-rom" style={{margin:"0 0 10px", fontSize:32, lineHeight:1.1}}>{p.title}</h3>
                <p style={{margin:0, fontSize:14, lineHeight:1.55, color:"var(--bone-2)", maxWidth:"60ch"}}>{p.body}</p>
              </div>
              <div style={{textAlign:"right"}}>
                <div className="mono" style={{fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"var(--bone-3)", marginBottom:6}}>↗ Impact</div>
                <div className="display" style={{fontStyle:"italic", fontSize:20, lineHeight:1.2, color:"var(--accent)"}}>{p.metric}</div>
              </div>
            </a>
          ))}
          <div style={{borderTop:"1px solid var(--rule-2)"}}></div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// STACK
function Stack({ copy, mode }) {
  return (
    <section id="stack" className="rule">
      <SectionHead eyebrow={copy.stack.eyebrow} title={copy.stack.title} lede={copy.stack.lede} mode={mode}/>
      <div className="wrap">
        <div data-reveal-stagger style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:48, rowGap:56}}>
          {copy.stack.groups.map(g => (
            <div key={g.name}>
              <div className="mono" style={{fontSize:11, letterSpacing:".18em", textTransform:"uppercase", color:"var(--accent)", marginBottom:14, paddingBottom:14, borderBottom:"1px solid var(--rule-2)"}}>{g.name}</div>
              <ul style={{margin:0, padding:0, listStyle:"none"}}>
                {g.items.map((it,i) => (
                  <li key={i} className="mono" style={{padding:"8px 0", fontSize:13, color:"var(--bone-2)"}}>{it}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// EXPERIENCE
function Experience({ copy, mode }) {
  return (
    <section id="experience" className="rule">
      <SectionHead eyebrow={copy.experience.eyebrow} title={copy.experience.title} mode={mode}/>
      <div className="wrap">
        <div data-reveal-stagger style={{display:"flex", flexDirection:"column"}}>
          {copy.experience.items.map((it,i) => (
            <div key={i} style={{display:"grid", gridTemplateColumns:"160px 1fr 1.2fr", gap:32, padding:"30px 0", borderTop:"1px solid var(--rule)", alignItems:"start"}}>
              <div className="display" style={{fontStyle:"italic", fontSize:36, color:"var(--accent)", lineHeight:1}}>{it.year}</div>
              <h3 className="display-rom" style={{margin:0, fontSize:26, lineHeight:1.15}}>{it.title}</h3>
              <p style={{margin:0, fontSize:14, lineHeight:1.6, color:"var(--bone-2)"}}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// MARQUEE separator — simplified, legible, fixed (no scroll)
function Marquee({ lang }) {
  const items = lang === "es"
    ? [
        { k:"01", v:"Pensamiento lógico" },
        { k:"02", v:"Tesorería pública" },
        { k:"03", v:"Desarrollo de software" },
        { k:"04", v:"Contabilidad y tributaria" },
      ]
    : [
        { k:"01", v:"Logical thinking" },
        { k:"02", v:"Public treasury" },
        { k:"03", v:"Software development" },
        { k:"04", v:"Accounting & tax" },
      ];
  const tag = lang === "es" ? "En este orden" : "In this order";
  return (
    <div style={{padding:"56px 0", borderTop:"1px solid var(--rule-2)", borderBottom:"1px solid var(--rule-2)", background:"rgba(244,240,232,.015)"}}>
      <div className="wrap" style={{display:"grid", gridTemplateColumns:"180px 1fr", gap:48, alignItems:"start"}}>
        <div className="mono" style={{fontSize:11, letterSpacing:".18em", textTransform:"uppercase", color:"var(--bone-3)", paddingTop:8}}>
          —— {tag}
        </div>
        <div data-reveal-stagger style={{display:"flex", flexWrap:"wrap", gap:0}}>
          {items.map((it,i) => (
            <div key={it.k} style={{display:"flex", alignItems:"baseline", gap:14, padding:"10px 28px 10px 0", borderRight: i < items.length-1 ? "1px solid var(--rule-2)" : "none", marginRight: i < items.length-1 ? 28 : 0}}>
              <span className="mono" style={{fontSize:11, letterSpacing:".14em", color:"var(--accent)"}}>{it.k}</span>
              <span className="display" style={{fontStyle: i === 0 ? "italic" : "normal", fontSize:"clamp(22px,2.6vw,34px)", lineHeight:1.05, color:"var(--bone)"}}>{it.v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// OTHERS — work beyond the personal brand
function Others({ copy, mode }) {
  if (!copy.others) return null;
  return (
    <section id="others" className="rule">
      <SectionHead eyebrow={copy.others.eyebrow} title={copy.others.title} lede={copy.others.lede} mode={mode}/>
      <div className="wrap">
        <div data-reveal-stagger style={{display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap:0, borderTop:"1px solid var(--rule-2)", borderLeft:"1px solid var(--rule-2)"}}>
          {copy.others.cards.map((c,i) => (
            <div key={c.num} style={{borderRight:"1px solid var(--rule-2)", borderBottom:"1px solid var(--rule-2)", padding:"32px 28px", display:"flex", flexDirection:"column", gap:22, minHeight:340}}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:16}}>
                <div>
                  <div className="mono" style={{fontSize:11, letterSpacing:".18em", color:"var(--accent)"}}>{c.num}</div>
                  <div className="mono" style={{fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color:"var(--bone-3)", marginTop:6}}>{c.kind}</div>
                </div>
                <div style={{display:"flex", gap:6}}>
                  {c.swatch.map((sw,si) => (
                    <span key={si} style={{width:18, height:18, background:sw, border:"1px solid var(--rule-2)", display:"inline-block"}} title={sw}></span>
                  ))}
                </div>
              </div>
              {/* Visual placeholder — each product has its own aesthetic */}
              <div style={{flex:1, minHeight:140, background:c.swatch[1], border:"1px solid var(--rule-2)", display:"flex", alignItems:"center", justifyContent:"center", padding:24, position:"relative", overflow:"hidden"}}>
                <div style={{position:"absolute", inset:0, opacity:0.06, backgroundImage:`linear-gradient(${c.swatch[0]} 1px, transparent 1px), linear-gradient(90deg, ${c.swatch[0]} 1px, transparent 1px)`, backgroundSize:"24px 24px"}}></div>
                <span style={{fontFamily:c.font + ", serif", fontStyle: i === 0 ? "italic" : "normal", fontSize: i === 0 ? 36 : 28, color:c.swatch[0], textAlign:"center", letterSpacing: i === 1 ? ".06em" : "0", textTransform: i === 1 ? "uppercase" : "none", fontWeight: i === 1 ? 600 : 400}}>{c.title.split("·")[0]}</span>
                <span className="mono" style={{position:"absolute", bottom:10, right:12, fontSize:9, letterSpacing:".2em", color:c.swatch[0], opacity:0.6}}>{c.font}</span>
              </div>
              <h3 className="display-rom" style={{margin:0, fontSize:24, lineHeight:1.15, color:"var(--bone)"}}>{c.title}</h3>
              <p style={{margin:0, fontSize:14, lineHeight:1.6, color:"var(--bone-3)"}}>{c.body}</p>
              <div className="mono" style={{fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color:"var(--accent)", paddingTop:8, borderTop:"1px solid var(--rule)"}}>
                <span style={{color:"var(--bone-3)"}}>—— {copy.others.view}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CONTACT
function Contact({ copy, mode }) {
  const [email, setEmail] = React.useState("");
  const [msg, setMsg] = React.useState("");
  const [sent, setSent] = React.useState(false);

  return (
    <section id="contact" className="rule">
      <SectionHead eyebrow={copy.contact.eyebrow} title={copy.contact.title} mode={mode}/>
      {copy.contact.title2 && (
        <div className="wrap" style={{marginTop:"-32px"}}>
          <h2 style={{margin:"0 0 32px", fontSize:"clamp(40px,7vw,96px)", lineHeight:0.98}} data-reveal>
            <Title roman={copy.contact.title2.roman} italic={null} mode={mode}/>
          </h2>
        </div>
      )}
      <div className="wrap" style={{display:"grid", gridTemplateColumns:"180px 1fr 1fr", gap:48, alignItems:"start"}}>
        <div></div>
        <div data-reveal>
          <p className="display-rom" style={{margin:0, fontSize:20, lineHeight:1.5, color:"var(--bone-2)", maxWidth:"54ch"}}>{copy.contact.lede}</p>
        </div>
        <div data-reveal>
          {!sent ? (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{display:"flex", flexDirection:"column", gap:18}}>
              <label style={{display:"flex", flexDirection:"column", gap:8}}>
                <span className="mono" style={{fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color:"var(--bone-3)"}}>Email</span>
                <input type="email" required value={email} onChange={(e)=>setEmail(e.target.value)} placeholder={copy.contact.placeholder}
                  style={{appearance:"none", background:"transparent", border:0, borderBottom:"1px solid var(--rule-2)", color:"var(--bone)", padding:"10px 0", fontFamily:"var(--mono)", fontSize:14, outline:"none"}}
                  onFocus={(e) => e.target.style.borderBottomColor = "var(--accent)"}
                  onBlur={(e) => e.target.style.borderBottomColor = "var(--rule-2)"}
                />
              </label>
              <label style={{display:"flex", flexDirection:"column", gap:8}}>
                <span className="mono" style={{fontSize:11, letterSpacing:".14em", textTransform:"uppercase", color:"var(--bone-3)"}}>{copy.contact.detailsLabel}</span>
                <input type="text" value={msg} onChange={(e)=>setMsg(e.target.value)}
                  style={{appearance:"none", background:"transparent", border:0, borderBottom:"1px solid var(--rule-2)", color:"var(--bone)", padding:"10px 0", fontFamily:"var(--mono)", fontSize:14, outline:"none"}}
                  onFocus={(e) => e.target.style.borderBottomColor = "var(--accent)"}
                  onBlur={(e) => e.target.style.borderBottomColor = "var(--rule-2)"}
                />
              </label>
              <button type="submit" className="btn" style={{marginTop:8, alignSelf:"flex-start"}}>
                <span>{copy.contact.send}</span>
                <span>→</span>
              </button>
            </form>
          ) : (
            <p className="display-rom" style={{margin:0, fontSize:22, lineHeight:1.4, color:"var(--accent)"}}>{copy.contact.sent}</p>
          )}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FOOTER
function Footer({ copy }) {
  return (
    <footer style={{borderTop:"1px solid var(--rule-2)", padding:"48px 0 28px"}}>
      <div className="wrap" style={{display:"flex", justifyContent:"space-between", flexWrap:"wrap", gap:24}}>
        <div className="mono" style={{fontSize:11, letterSpacing:".14em", color:"var(--bone-3)"}}>
          {copy.footer.year} 2013–2026 · Juan David Cardona Cardozo
        </div>
        <div className="mono" style={{fontSize:11, letterSpacing:".14em", color:"var(--bone-3)"}}>
          {copy.footer.colofon} &nbsp;·&nbsp; {copy.footer.typeset}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, Hero, About, Tools, Services, Expertise, Projects, Stack, Experience, Studio, Others, Marquee, Contact, Footer, Title, SectionHead });