/* ===== Sections: Hero, Services, Clients, About, Contact ===== */ /* striped image placeholder */ function Placeholder({ label, h, style }){ return (

{label}

); } /* ---------- HERO ---------- */ function Hero({ t }){ const go = (e,href)=>{ e.preventDefault(); document.querySelector(href)?.scrollIntoView({behavior:'smooth'}); }; const h = t.hero; return (

{/* left */}

{h.eyebrow}

{h.title_a}
{h.title_b}

{h.lede}

go(e,'#contact')} className="btn btn-primary btn-lg"> {h.cta1} → go(e,'#method')} className="btn btn-ghost btn-lg">{h.cta2}

{[h.stat1,h.stat2,h.stat3].map((s,i)=>(

{s[0]}

{s[1]}

))}

{/* right visual */}

{/* floating roadmap card */}

Your roadmap 2 / 5

{['F','O','R','M','A'].map((k,i)=>(

{k}

))}

); } /* ---------- SERVICES ---------- */ function Services({ t }){ const go = (e,href)=>{ e.preventDefault(); document.querySelector(href)?.scrollIntoView({behavior:'smooth'}); }; const s = t.services; return (

{s.eyebrow}

{s.title}

{s.lede}

{/* core paths */}

{s.coreLabel}

{s.core.map((c,i)=>(

{c.tag}

{c.name}

{c.sub}

{c.body}

))}

{/* à la carte */}

{s.alaLabel} {s.alaSub}

{s.ala.map((a,i)=>(

{e.currentTarget.style.background='#fff';e.currentTarget.style.boxShadow='var(--shadow-sm)';}} onMouseLeave={e=>{e.currentTarget.style.background='var(--tint)';e.currentTarget.style.boxShadow='none';}}> {String(i+1).padStart(2,'0')}

{a.name}

{a.body}

))}

{/* pricing + cta */}

{s.pricing}

go(e,'#contact')} className="btn btn-primary btn-lg">{s.cta} →

); } /* ---------- CLIENTS / REFERENCES ---------- */ function Clients({ t }){ const go = (e,href)=>{ e.preventDefault(); document.querySelector(href)?.scrollIntoView({behavior:'smooth'}); }; const c = t.clients; return (

”

{c.eyebrow}

{c.title}

“{c.quote}”

{c.sub}

{c.perks.map((p,i)=>(

{i+1}

{p[0]}

{p[1]}

))}

go(e,'#contact')} className="btn btn-lg" style={{marginTop:34,background:'#fff',color:'var(--indigo)'}}> {c.cta} →

); } /* ---------- ABOUT ---------- */ function About({ t }){ const a = t.about; return (

20+

years in enterprise IT

{a.eyebrow}

{a.title}

{a.name}

{a.role}

{a.p1}

{a.p2}

{a.p3.replace(a.pull,'').trim()} {a.pull}

{a.logosLabel}

{a.logos.map((l,i)=>( {l} ))}

); } /* ---------- CONTACT ---------- */ function Contact({ t }){ const c = t.contact; const [sent,setSent] = useState(false); const [form,setForm] = useState({name:'',email:'',biz:'',msg:''}); const [err,setErr] = useState({}); const set = (k,v)=>setForm(f=>({...f,[k]:v})); const submit = (e)=>{ e.preventDefault(); const er={}; if(!form.name.trim()) er.name=1; if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email=1; if(!form.biz.trim()) er.biz=1; setErr(er); if(Object.keys(er).length===0) setSent(true); }; const field = (k,label,type='text',area=false)=>( {label} {area ?

set(k,e.target.value)} rows={3}
            style={{...inputStyle, borderColor: err[k]?'#d9544d':'var(--line-cool)', resize:'vertical'}}/>
        : <input type={type} value={form[k]} onChange={e=>set(k,e.target.value)}
            style={{...inputStyle, borderColor: err[k]?'#d9544d':'var(--line-cool)'}}/>}
    </label>
  );
  const inputStyle = {fontFamily:'var(--sans)',fontSize:15,padding:'12px 14px',borderRadius:'var(--r-sm)',
    border:'1.5px solid var(--line-cool)',background:'#fff',color:'var(--ink)',outline:'none',width:'100%'};

return (
    <section id="contact" className="section" style={{background:'var(--navy-deep)',color:'#fff'}}>
      <div className="wrap">
        <div className="contact-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'clamp(32px,5vw,72px)',alignItems:'center'}}>
          {/* left info */}
          <div className="reveal">
            <span className="eyebrow" style={{color:'var(--teal-bright)'}}>{c.eyebrow}</span>
            <h2 style={{color:'#fff',fontSize:'clamp(32px,4.6vw,52px)',marginTop:16}}>{c.title}</h2>
            <p style={{fontSize:'clamp(17px,1.9vw,20px)',color:'rgba(255,255,255,.78)',marginTop:16,maxWidth:460}}>{c.lede}</p>

<div style={{display:'flex',flexDirection:'column',gap:20,marginTop:36}}>
              {[[c.emailLabel,c.email,c.emailNote],[c.siteLabel,c.site,null],[c.locLabel,c.loc,c.locNote]].map((row,i)=>(
                <div key={i} style={{display:'flex',gap:16,alignItems:'flex-start'}}>
                  <div style={{width:8,height:8,borderRadius:'50%',background:'var(--teal-bright)',marginTop:7,flex:'0 0 auto'}}/>
                  <div>
                    <div style={{fontSize:12,letterSpacing:'.12em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',fontWeight:700}}>{row[0]}</div>
                    <div style={{fontSize:18,fontWeight:600,color:'#fff',marginTop:3}}>{row[1]}</div>
                    {row[2] && <div style={{fontSize:13.5,color:'rgba(255,255,255,.6)',marginTop:2}}>{row[2]}</div>}
                  </div>
                </div>
              ))}
            </div>
          </div>

{/* form card */}
          <div className="reveal" style={{background:'#fff',borderRadius:'var(--r-lg)',padding:'clamp(26px,3.4vw,40px)',
            boxShadow:'var(--shadow-lg)',color:'var(--ink)'}}>
            {sent ? (
              <div style={{display:'grid',placeItems:'center',textAlign:'center',minHeight:300,gap:14}}>
                <div style={{width:60,height:60,borderRadius:'50%',background:'var(--teal)',display:'grid',placeItems:'center',
                  fontSize:30,color:'#fff'}}>✓</div>
                <h3 style={{fontSize:26}}>{t.lang==='es'?'¡Listo!':'You\u2019re in.'}</h3>
                <p style={{color:'var(--ink-soft)',maxWidth:320}}>{c.formNote}</p>
              </div>
            ) : (
              <form onSubmit={submit} style={{display:'flex',flexDirection:'column',gap:16}}>
                <h3 style={{fontSize:'clamp(20px,2.4vw,26px)'}}>{c.cta}</h3>
                {field('name',c.formName)}
                {field('email',c.formEmail,'email')}
                {field('biz',c.formBiz)}
                {field('msg',c.formMsg,'text',true)}
                <button type="submit" className="btn btn-primary btn-lg" style={{marginTop:4}}>{c.formSend}</button>
                <p style={{fontSize:13,color:'var(--ink-faint)',textAlign:'center',margin:0}}>{c.formNote}</p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Placeholder, Hero, Services, Clients, About, Contact });

{h.title_a} {h.title_b}

{s.title}

{c.name}

{a.name}

{c.title}

{p[0]}

{a.title}

{h.title_a}
{h.title_b}