// Home page — Problem, Services, Results, Testimonials, CTA
// Variantele folosite live: Problem_Pain, Services_Accent, Results_Full, Testimonials_Big, FinalCTA_Urgency.
// Datele din Results & Testimonials sunt preluate din studiile de caz reale ACE Agency.

/* ============================================================
   PROBLEM / DE CE NOI
   ============================================================ */

function Problem_Pain() {
  const w = useWindowWidth();
  const isMobile = w < 900;
  const pains = [
    { n: "01", t: "Raportare lunară cu metrici vanity", d: "Impresii, CTR, reach — nimic despre venit real. Pleci de la raport întrebându-te ce s-a întâmplat cu banii." },
    { n: "02", t: "Contracte de 12 luni obligatorii", d: "Blocat cu o agenție care nu livrează. Fără ieșire, fără renegociere, fără clauză de performanță." },
    { n: "03", t: "Account manager junior care rotește la 3 luni", d: "De fiecare dată când începi să lucrezi cu cineva, pleacă. Nimic nu se acumulează, totul se resetează." },
    { n: "04", t: "Tracking rupt după iOS 14.5 + GA4", d: "Conturi în care datele nu se leagă. Nu știi ce campanie vinde și care arde bugetul." },
  ];
  return (
    <section id="de-ce-noi" data-screen-label="03 Problem" style={{ background: WARM_OFF, color: WARM_BLACK, padding: isMobile ? "60px 0" : "96px 0", borderRadius: isMobile ? "1rem" : "2rem", margin: isMobile ? "4px 8px" : "8px 32px" }}>
      <HContainer>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 40 : 72, alignItems: "start" }}>
          <div>
            <HOverline>PROBLEMA</HOverline>
            <HHeading as="h2" style={{ fontSize: isMobile ? 34 : 56, marginTop: 16, color: WARM_BLACK }}>De ce majoritatea <span style={{ color: BURGUNDY }}>agențiilor</span> nu livrează.</HHeading>
            <HBody style={{ color: WARM_GREY, marginTop: 24, fontSize: 18 }}>Dacă ai lucrat deja cu 2+ agenții, probabil le-ai văzut pe toate. Noi lucrăm exact invers.</HBody>
          </div>
          <div>
            {pains.map((p,i) => (
              <div key={i} style={{ borderTop: `1px solid ${BORDER_LIGHT}`, padding: "24px 0", display: "grid", gridTemplateColumns: "64px 1fr", gap: 20 }}>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 32, color: BURGUNDY, letterSpacing: "-0.02em" }}>{p.n}</div>
                <div>
                  <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 22, color: WARM_BLACK }}>{p.t}</div>
                  <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 16, lineHeight: 1.55, color: WARM_GREY, marginTop: 8 }}>{p.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </HContainer>
    </section>
  );
}

function Problem_Compare() {
  const rows = [
    ["Raportare săptămânală cu venit real", true, false],
    ["Contract flexibil, 90 zile minim", true, false],
    ["Account manager senior dedicat", true, "junior, rotație"],
    ["Tracking server-side + GA4 corect", true, false],
    ["ROAS țintă contractual", true, false],
    ["Audit gratuit înainte de semnare", true, "audit plătit"],
  ];
  return (
    <section id="de-ce-noi" data-screen-label="03 Problem" style={{ background: WARM_BLACK, color: "#fff", padding: "96px 0" }}>
      <HContainer>
        <HOverline dark>DE CE NOI</HOverline>
        <HHeading as="h2" style={{ fontSize: 52, marginTop: 16, color: "#fff", maxWidth: 900 }}>O agenție disciplinată vs. una obișnuită.</HHeading>
        <div style={{ marginTop: 48, background: "rgba(255,255,255,0.02)", border: `1px solid ${BORDER_DARK}`, borderRadius: 24, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.8fr 1fr 1fr", padding: "20px 32px", background: BURGUNDY, fontFamily: "Inter", fontSize: 13, fontWeight: 600, color: "#fff" }}>
            <div></div><div style={{ textAlign: "center" }}>ACE Agency</div><div style={{ textAlign: "center", opacity: 0.7 }}>Agenție obișnuită</div>
          </div>
          {rows.map(([f, a, b], i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1.8fr 1fr 1fr", padding: "20px 32px", borderBottom: i === rows.length-1 ? "none" : `1px solid ${BORDER_DARK}`, fontFamily: "Inter", fontSize: 15, alignItems: "center", color: "#fff" }}>
              <div>{f}</div>
              <div style={{ textAlign: "center", color: BURGUNDY_BRIGHT, fontWeight: 600, fontSize: 18 }}>{a === true ? "✓" : a || "—"}</div>
              <div style={{ textAlign: "center", color: "#a0a0a0" }}>{b === true ? "✓" : b || "—"}</div>
            </div>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

function Problem_Quote() {
  return (
    <section id="de-ce-noi" data-screen-label="03 Problem" style={{ background: WARM_OFF, color: WARM_BLACK, padding: "120px 0", borderRadius: "2rem", margin: "8px 32px" }}>
      <HContainer>
        <div style={{ maxWidth: 1000, margin: "0 auto", textAlign: "center" }}>
          <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 110, lineHeight: 0.7, color: BURGUNDY }}>"</div>
          <HHeading as="h2" style={{ fontSize: 56, color: WARM_BLACK, marginTop: 0, lineHeight: 1.08, letterSpacing: "-0.02em" }}>
            Agențiile nu sunt plătite să-ți facă<br/>brand-ul să vândă.<br/><span style={{ color: BURGUNDY }}>Sunt plătite să livreze ore.</span>
          </HHeading>
          <HBody style={{ marginTop: 32, color: WARM_GREY, fontSize: 20, maxWidth: 720, margin: "32px auto 0" }}>
            Noi lucrăm exact invers. Contract legat de KPI-uri, raportare săptămânală pe venit, fee variabil în funcție de performanță. Pentru că avem încredere în ce livrăm.
          </HBody>
          <div style={{ marginTop: 40 }}><BCTA variant="outline">Vezi cum lucrăm →</BCTA></div>
        </div>
      </HContainer>
    </section>
  );
}

/* ============================================================
   SERVICES
   ============================================================ */

const services = [
  { t: "Google Ads", d: "Search · Shopping · Performance Max. ROAS țintă contractual, Smart Bidding cu date reale.", m: "13.34×", ml: "ROAS ITMAR" },
  { t: "Meta Ads", d: "Facebook · Instagram. Creative iterativ + tracking server-side + funnel cu retargeting.", m: "8.11×", ml: "ROAS Amora" },
  { t: "TikTok Ads", d: "Spark Ads + UGC autentic. Pentru DTC și branduri care vor audiențe sub 35 ani.", m: "+433%", ml: "conversii ITMAR" },
  { t: "Lead Generation", d: "Instant Forms Meta cu întrebări de calificare. Lead-uri reale, nu click-baiters.", m: "lei 17", ml: "CPL HoReCa" },
  { t: "SEO & Content", d: "Tehnic + editorial + link building. Pentru creștere organică durabilă, AEO și local SEO.", m: "+91%", ml: "conversii GA4" },
  { t: "Consultanță", d: "Audit, strategie paid, implementare in-house. Setup complet în 48h.", m: "48h", ml: "livrare audit" },
];

function Services_ROI() {
  return (
    <section id="servicii" data-screen-label="04 Services" style={{ background: WARM_BLACK, color: "#fff", padding: "96px 0" }}>
      <HContainer>
        <HOverline dark>SERVICII</HOverline>
        <HHeading as="h2" style={{ fontSize: 52, marginTop: 16, color: "#fff" }}>Fiecare canal, legat de venit.</HHeading>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, marginTop: 48 }}>
          {services.map((s,i) => (
            <div key={i} style={{ background: "rgba(255,255,255,0.03)", border: `1px solid ${BORDER_DARK}`, borderRadius: 24, padding: 28, minHeight: 240, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 26, color: "#fff" }}>{s.t}</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 15, color: "#D9D9D9", marginTop: 10 }}>{s.d}</div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginTop: 28, paddingTop: 20, borderTop: `1px solid ${BORDER_DARK}` }}>
                <div>
                  <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 36, color: BURGUNDY_BRIGHT, lineHeight: 1 }}>{s.m}</div>
                  <div style={{ fontFamily: "Inter", fontSize: 11, color: "#a0a0a0", textTransform: "uppercase", letterSpacing: "0.12em", marginTop: 6 }}>{s.ml}</div>
                </div>
                <div style={{ color: BURGUNDY_BRIGHT, fontSize: 18 }}>→</div>
              </div>
            </div>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

function Services_Accent() {
  const w = useWindowWidth();
  const isMobile = w < 640;
  const isTablet = w >= 640 && w < 1024;
  return (
    <section id="servicii" data-screen-label="04 Services" style={{ background: WARM_OFF, color: WARM_BLACK, padding: isMobile ? "60px 0" : "96px 0", borderRadius: isMobile ? "1rem" : "2rem", margin: isMobile ? "4px 8px" : "8px 32px" }}>
      <HContainer>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48, flexWrap: "wrap", gap: 16 }}>
          <div>
            <HOverline>SERVICII</HOverline>
            <HHeading as="h2" style={{ fontSize: isMobile ? 34 : 52, marginTop: 16 }}>6 canale. <span style={{ color: BURGUNDY }}>Un sistem.</span></HHeading>
          </div>
          <HBody style={{ maxWidth: 420, color: WARM_GREY }}>Fiecare canal vorbește cu celelalte. Tracking unificat, atribuire corectă, decizii pe date reale — nu pe CTR raportat de platformă.</HBody>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : isTablet ? "1fr 1fr" : "repeat(3,1fr)", gap: 2, background: BORDER_LIGHT, borderRadius: 24, overflow: "hidden", border: `1px solid ${BORDER_LIGHT}` }}>
          {services.map((s,i) => (
            <div key={i} style={{ background: i === 0 ? BURGUNDY : "#fff", color: i === 0 ? "#fff" : WARM_BLACK, padding: 32, minHeight: 220 }}>
              <div style={{ fontFamily: "Inter", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.14em", color: i === 0 ? "rgba(255,255,255,0.7)" : WARM_GREY }}>0{i+1}</div>
              <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 28, marginTop: 14 }}>{s.t}</div>
              <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 14, marginTop: 10, color: i === 0 ? "rgba(255,255,255,0.85)" : WARM_GREY, lineHeight: 1.55 }}>{s.d}</div>
              <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 24, marginTop: 24, color: i === 0 ? "#fff" : BURGUNDY }}>{s.m} <span style={{ fontSize: 11, fontFamily: "Inter", fontWeight: 500, color: i === 0 ? "rgba(255,255,255,0.7)" : WARM_GREY, letterSpacing: "0.1em" }}>{s.ml.toUpperCase()}</span></div>
            </div>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

function Services_Tabs() {
  const [active, setActive] = React.useState(0);
  const s = services[active];
  return (
    <section id="servicii" data-screen-label="04 Services" style={{ background: WARM_BLACK, color: "#fff", padding: "96px 0" }}>
      <HContainer>
        <HOverline dark>SERVICII</HOverline>
        <HHeading as="h2" style={{ fontSize: 52, marginTop: 16, color: "#fff" }}>Alege canalul. Vezi rezultatul.</HHeading>
        <div style={{ marginTop: 40, display: "flex", gap: 10, flexWrap: "wrap" }}>
          {services.map((x,i) => (
            <button key={i} onClick={() => setActive(i)} style={{ background: active === i ? BURGUNDY : "transparent", color: "#fff", border: `1px solid ${active === i ? BURGUNDY : BORDER_DARK}`, borderRadius: 9999, padding: "12px 22px", fontFamily: "Inter", fontSize: 14, cursor: "pointer", transition: "all 200ms" }}>{x.t}</button>
          ))}
        </div>
        <div style={{ marginTop: 32, background: "rgba(255,255,255,0.03)", border: `1px solid ${BORDER_DARK}`, borderRadius: 24, padding: 48, display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 48 }}>
          <div>
            <HHeading as="h3" style={{ fontSize: 36, color: "#fff" }}>{s.t}</HHeading>
            <HBody style={{ color: "#D9D9D9", marginTop: 14, maxWidth: 480 }}>{s.d} Lucrăm cu branduri DTC, retaileri și SaaS. Raport săptămânal. ROAS/KPI țintă contractual din ziua 1.</HBody>
            <div style={{ marginTop: 24 }}><BCTA>Detalii {s.t} →</BCTA></div>
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div>
              <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 120, color: BURGUNDY_BRIGHT, lineHeight: 1, letterSpacing: "-0.03em" }}>{s.m}</div>
              <div style={{ fontFamily: "Inter", fontSize: 12, color: "#a0a0a0", textTransform: "uppercase", letterSpacing: "0.14em", marginTop: 8 }}>{s.ml} · {s.t.toLowerCase()}</div>
            </div>
          </div>
        </div>
      </HContainer>
    </section>
  );
}

/* ============================================================
   RESULTS / CASE STUDIES — date reale
   ============================================================ */

const caseStudies = [
  {
    client: "Amora",
    logoName: "AMORA",
    logoStyle: "serif",
    cat: "E-commerce · Beauty",
    problem: "Bugetul Meta aloca masiv pe audiențe generice, ROAS 3.04× chiar și în Black Friday. Scalare imposibilă fără să spargi rentabilitatea.",
    solution: "Funnel complet (cold + retargeting), audiențe stratificate, creative iterat săptămânal. Scalare +141% spend cu CPM -8%.",
    result: "8.11× ROAS · +544% revenue · +288% conversii",
    period: "3 luni · Dec 2025 – Mar 2026"
  },
  {
    client: "ITMAR",
    logoName: "ITMAR",
    logoStyle: "tech",
    cat: "E-commerce · IT Refurbished",
    problem: "Revenue Google Ads blocat la 632k RON/an. Scalare imposibilă fără să crești bugetul disproporționat. Fără canal Meta sau TikTok activ.",
    solution: "Restructurare Shopping + Performance Max, adăugat Meta și TikTok ca canale complementare. Escalare progresivă cu Smart Bidding calibrat pe date proprii.",
    result: "13.34× ROAS Google · 2.38M RON revenue · +276% față de baseline",
    period: "16 luni · Iun 2024 – Oct 2025"
  },
  {
    client: "Trady",
    logoName: "TRADY",
    logoStyle: "sans",
    cat: "E-commerce · Home",
    problem: "ROAS Meta 1.02× — fiecare leu genera 1.02 lei. Buget masiv pe awareness și engagement fără conversii. Google Ads la 2.64× ROAS.",
    solution: "Eliminat campanii vanity, restructurat Meta pe 7 categorii de produs. Google: tăiat 45% buget, keep doar ce convertea. Adăugat canal B2B.",
    result: "6.05× ROAS Meta (+493%) · 4.40× Google (+67%) · -60% CPA",
    period: "2.5 luni · Ian–Mar 2026"
  },
  {
    client: "doSense",
    logoName: "doSense",
    logoStyle: "mixed",
    cat: "Servicii · Wellness",
    problem: "Campanii Website Schedules cu fricțiune maximă — 15 programări în 3 luni la lei 394/programare. Nesustenabil.",
    solution: "Schimbat obiectivul de la \"programează pe site\" la Lead Gen cu Instant Form. Micro-angajament în loc de decizie completă din primul contact.",
    result: "304 lead-uri (20× volum) · CPL lei 52 (-87%) · scalat de 2.7×",
    period: "3 luni · Oct 2025 – Ian 2026"
  },
];

function Results_Full({ onShowAll, showAll }) {
  const w = useWindowWidth();
  const isMobile = w < 640;
  const isTablet = w >= 640 && w < 1100;
  return (
    <section id="rezultate" data-screen-label="05 Results" style={{ background: WARM_OFF, color: WARM_BLACK, padding: isMobile ? "60px 0" : "96px 0", borderRadius: isMobile ? "1rem" : "2rem", margin: isMobile ? "4px 8px" : "8px 32px" }}>
      <HContainer>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 16 }}>
          <div>
            <HOverline>REZULTATE REALE</HOverline>
            <HHeading as="h2" style={{ fontSize: isMobile ? 30 : 52, marginTop: 16 }}>Client. Problemă. Soluție. <span style={{ color: BURGUNDY }}>Rezultat.</span></HHeading>
          </div>
          {!showAll && <BCTA variant="outline" size="md" onClick={onShowAll}>Toate studiile →</BCTA>}
        </div>
        <div style={{ marginTop: 48, display: "flex", flexDirection: "column", gap: 16 }}>
          {caseStudies.map((c,i) => (
            <div key={i} style={{ background: "#fff", border: `1px solid ${BORDER_LIGHT}`, borderRadius: 24, padding: isMobile ? 20 : 40, display: "grid", gridTemplateColumns: isMobile ? "1fr" : isTablet ? "1fr 1fr" : "1fr 1.2fr 1fr 1.3fr", gap: isMobile ? 16 : 32, alignItems: "center" }}>
              <div>
                <ClientLogo name={c.logoName} variant={c.logoStyle} dark={false}/>
                <div style={{ fontFamily: "Inter", fontSize: 11, color: WARM_GREY, marginTop: 10, textTransform: "uppercase", letterSpacing: "0.14em" }}>{c.cat}</div>
                <div style={{ fontFamily: "Inter", fontSize: 11, color: WARM_GREY, marginTop: 4 }}>{c.period}</div>
              </div>
              <div>
                <div style={{ fontFamily: "Inter", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.14em", color: WARM_GREY }}>PROBLEMĂ</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 14, color: WARM_BLACK, marginTop: 6, lineHeight: 1.55 }}>{c.problem}</div>
              </div>
              <div>
                <div style={{ fontFamily: "Inter", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.14em", color: WARM_GREY }}>SOLUȚIE</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 14, color: WARM_BLACK, marginTop: 6, lineHeight: 1.55 }}>{c.solution}</div>
              </div>
              <div style={{ background: BURGUNDY, color: "#fff", borderRadius: 16, padding: 20, alignSelf: "stretch", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div style={{ fontFamily: "Inter", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.14em", color: "rgba(255,255,255,0.7)" }}>REZULTAT</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 20, marginTop: 6, letterSpacing: "-0.01em" }}>{c.result}</div>
              </div>
            </div>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

function Results_Cards() {
  return (
    <section id="rezultate" data-screen-label="05 Results" style={{ background: WARM_BLACK, color: "#fff", padding: "96px 0" }}>
      <HContainer>
        <HOverline dark>STUDII DE CAZ</HOverline>
        <HHeading as="h2" style={{ fontSize: 52, marginTop: 16, color: "#fff" }}>Branduri care ne-au ales.</HHeading>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 48 }}>
          {caseStudies.map((c,i) => (
            <div key={i} style={{ background: i === 1 ? BURGUNDY : "rgba(255,255,255,0.03)", border: i === 1 ? "none" : `1px solid ${BORDER_DARK}`, borderRadius: 24, padding: 32, minHeight: 420, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <ClientLogo name={c.logoName} variant={c.logoStyle} dark={true}/>
                <div style={{ fontFamily: "Inter", fontSize: 11, color: i === 1 ? "rgba(255,255,255,0.75)" : "#a0a0a0", marginTop: 12, textTransform: "uppercase", letterSpacing: "0.14em" }}>{c.cat}</div>
              </div>
              <div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 28, color: BURGUNDY_BRIGHT, lineHeight: 1.15 }}>{c.result}</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 14, color: i === 1 ? "rgba(255,255,255,0.9)" : "#D9D9D9", marginTop: 20, lineHeight: 1.55 }}>{c.solution}</div>
                <div style={{ fontFamily: "Inter", fontSize: 13, color: "#fff", marginTop: 24, display: "flex", justifyContent: "space-between", borderTop: `1px solid ${i === 1 ? "rgba(255,255,255,0.2)" : BORDER_DARK}`, paddingTop: 16 }}>
                  <span>Studiu complet</span><span>→</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

function Results_Table() {
  const w = useWindowWidth();
  const isMobile = w < 640;
  const rows = [
    { c: "Amora",    ch: "Meta Ads",           k: "8.11× ROAS",     ca: "+544% revenue", p: "3 luni" },
    { c: "Trady",    ch: "Meta + Google",      k: "6.05× ROAS",     ca: "-60% CPA Meta", p: "2.5 luni" },
    { c: "ITMAR",    ch: "Google + Meta + TT", k: "13.34× ROAS",    ca: "+276% revenue", p: "16 luni" },
    { c: "doSense",  ch: "Meta Lead Gen",      k: "lei 52 CPL",     ca: "-87% CPL",      p: "3 luni" },
    { c: "Tutti",    ch: "Meta Lead Gen",      k: "lei 17 CPL",     ca: "-36% CPL",      p: "2 camp." },
    { c: "Leonor",   ch: "Meta Lead Gen",      k: "lei 43 CPL",     ca: "sub target 50", p: "2025" },
  ];
  return (
    <section id="rezultate" data-screen-label="05 Results" style={{ background: WARM_OFF, color: WARM_BLACK, padding: isMobile ? "60px 0" : "96px 0", borderRadius: isMobile ? "1rem" : "2rem", margin: isMobile ? "4px 8px" : "8px 32px" }}>
      <HContainer>
        <HOverline>REZULTATE MĂSURABILE</HOverline>
        <HHeading as="h2" style={{ fontSize: isMobile ? 30 : 52, marginTop: 16 }}>Cifre auditabile. Nu storytelling.</HHeading>
        <div style={{ marginTop: 48, overflowX: isMobile ? "auto" : "visible" }}>
          <div style={{ minWidth: isMobile ? 560 : "auto", background: "#fff", border: `1px solid ${BORDER_LIGHT}`, borderRadius: 24, overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr 1fr", padding: isMobile ? "14px 20px" : "18px 32px", background: WARM_BLACK, color: "#fff", fontFamily: "Inter", fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.12em" }}>
              <div>Client</div><div>Canal</div><div>KPI cheie</div><div>Variație</div><div>Perioadă</div>
            </div>
            {rows.map((row,i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr 1fr", padding: isMobile ? "16px 20px" : "20px 32px", borderTop: `1px solid ${BORDER_LIGHT}`, fontFamily: "Inter", fontSize: isMobile ? 13 : 15, alignItems: "center" }}>
                <div style={{ fontWeight: 600, color: WARM_BLACK }}>{row.c}</div>
                <div style={{ color: WARM_GREY }}>{row.ch}</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: isMobile ? 18 : 22, color: BURGUNDY }}>{row.k}</div>
                <div style={{ color: "#15803d", fontWeight: 600 }}>{row.ca}</div>
                <div style={{ color: WARM_GREY, fontSize: isMobile ? 11 : 13 }}>{row.p}</div>
              </div>
            ))}
          </div>
        </div>
      </HContainer>
    </section>
  );
}

/* ============================================================
   TESTIMONIALS — citate ancorate pe rezultate reale
   ============================================================ */

const testimonials = [
  {
    q: "ROAS Meta a sărit de la 3× la 8.11× într-un sezon mai slab decât Black Friday-ul anterior. Nu sezonul a făcut diferența — strategia a făcut-o.",
    a: "Echipa Amora", r: "E-commerce · Beauty", c: "amora.ro",
    m: "+544% revenue · 8.11× ROAS"
  },
  {
    q: "Am redus bugetul Google cu 45% și am crescut ROAS-ul cu 67%. Pe Meta am trecut de la 1× la 6× ROAS. Altă agenție mi-ar fi cerut să cheltui mai mult.",
    a: "Echipa Trady", r: "E-commerce · Home", c: "trady.ro",
    m: "6.05× ROAS · -60% CPA"
  },
  {
    q: "Am trecut de la 15 programări în 3 luni la 304 lead-uri cu același tip de cont. Costul per lead a scăzut de la 394 lei la 52 lei.",
    a: "Echipa doSense", r: "Servicii · Wellness", c: "dosense.ro",
    m: "20× leads · -87% CPL"
  },
];

function Testimonials_Big() {
  const [idx, setIdx] = React.useState(0);
  const w = useWindowWidth();
  const isMobile = w < 900;
  const t = testimonials[idx];
  return (
    <section id="testimoniale" data-screen-label="06 Testimonials" style={{ background: WARM_OFF, color: WARM_BLACK, padding: isMobile ? "60px 0" : "96px 0", borderRadius: isMobile ? "1rem" : "2rem", margin: isMobile ? "4px 8px" : "8px 32px" }}>
      <HContainer>
        <HOverline>TESTIMONIALE</HOverline>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 28 : 64, marginTop: 32, alignItems: "center" }}>
          <div style={{ width: isMobile ? "100%" : 280, height: isMobile ? 160 : 360, background: `linear-gradient(135deg, ${BURGUNDY} 0%, ${BURGUNDY_DARK} 100%)`, borderRadius: 24, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 60%)" }}/>
            <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 96, letterSpacing: "-0.02em", lineHeight: 1, position: "relative" }}>
              {t.c.split(".")[0].slice(0,2).toUpperCase()}
            </div>
            <div style={{ position: "absolute", bottom: 24, left: 24, fontFamily: "Inter", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>{t.c}</div>
          </div>
          <div>
            <HHeading as="h2" style={{ fontSize: 38, color: WARM_BLACK, lineHeight: 1.15, letterSpacing: "-0.02em" }}>„{t.q}"</HHeading>
            <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 20 }}>
              <div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 18, color: WARM_BLACK }}>{t.a}</div>
                <div style={{ fontFamily: "Inter", fontSize: 13, color: WARM_GREY, marginTop: 2 }}>{t.r}</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 24, color: BURGUNDY, marginTop: 14 }}>{t.m}</div>
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                {testimonials.map((_, i) => (
                  <button key={i} onClick={() => setIdx(i)} style={{ width: 40, height: 40, borderRadius: 20, background: idx === i ? BURGUNDY : "#fff", color: idx === i ? "#fff" : WARM_BLACK, border: `1px solid ${idx === i ? BURGUNDY : BORDER_LIGHT}`, cursor: "pointer", fontFamily: "Inter", fontSize: 13 }}>{i+1}</button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </HContainer>
    </section>
  );
}

function Testimonials_Grid() {
  return (
    <section id="testimoniale" data-screen-label="06 Testimonials" style={{ background: WARM_BLACK, color: "#fff", padding: "96px 0" }}>
      <HContainer>
        <HOverline dark>CE SPUN CLIENȚII</HOverline>
        <HHeading as="h2" style={{ fontSize: 52, marginTop: 16, color: "#fff" }}>Fondatori. Nu buyer persona.</HHeading>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 48 }}>
          {testimonials.map((t,i) => (
            <div key={i} style={{ background: i === 1 ? BURGUNDY : "rgba(255,255,255,0.03)", border: i === 1 ? "none" : `1px solid ${BORDER_DARK}`, borderRadius: 24, padding: 32, minHeight: 340, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div style={{ color: BURGUNDY_BRIGHT, fontSize: 16 }}>★★★★★</div>
                <p style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 17, lineHeight: 1.55, color: "#fff", margin: "18px 0 0" }}>„{t.q}"</p>
              </div>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: `1px solid ${i === 1 ? "rgba(255,255,255,0.2)" : BORDER_DARK}`, display: "flex", justifyContent: "space-between", alignItems: "end" }}>
                <div>
                  <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 15, color: "#fff" }}>{t.a}</div>
                  <div style={{ fontFamily: "Inter", fontSize: 12, color: i === 1 ? "rgba(255,255,255,0.8)" : "#a0a0a0", marginTop: 2 }}>{t.r} · {t.c}</div>
                </div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 18, color: "#fff" }}>{t.m}</div>
              </div>
            </div>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

function Testimonials_Wall() {
  const more = [
    ...testimonials,
    { q: "Revenue Google Ads a urcat de la 632k la 2.38M RON în 16 luni. Am scalat progresiv, n-am sărit în gol.", a: "Echipa ITMAR", r: "IT Refurbished", c: "itmar.ro", m: "2.38M RON · 13.34× ROAS" },
    { q: "114 rezervări din două campanii. Cost per lead de lei 17 — imposibil pe piața HoReCa bucureșteană pentru mall.", a: "Tutti Brasserie", r: "HoReCa · Sun Plaza", c: "Tutti", m: "114 leads · lei 17 CPL" },
    { q: "83 lead-uri calificate prin formular nativ Meta, sub target-ul de 50 lei/lead. Nu volum brut — oameni pregătiți de conversație.", a: "Leonor Institute", r: "Educație Profesională", c: "Leonor", m: "83 leads · lei 43 CPL" },
  ];
  return (
    <section id="testimoniale" data-screen-label="06 Testimonials" style={{ background: WARM_OFF, color: WARM_BLACK, padding: "96px 0", borderRadius: "2rem", margin: "8px 32px" }}>
      <HContainer>
        <HOverline>WALL OF RESULTS</HOverline>
        <HHeading as="h2" style={{ fontSize: 52, marginTop: 16 }}>Cifre spuse de brandurile <span style={{ color: BURGUNDY }}>care le-au trăit.</span></HHeading>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginTop: 48 }}>
          {more.map((t,i) => (
            <div key={i} style={{ background: "#fff", border: `1px solid ${BORDER_LIGHT}`, borderRadius: 20, padding: 24, breakInside: "avoid" }}>
              <div style={{ color: BURGUNDY, fontSize: 14 }}>★★★★★</div>
              <p style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 15, lineHeight: 1.55, margin: "12px 0 0" }}>„{t.q}"</p>
              <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}>
                <div style={{ fontFamily: "Inter", fontSize: 12, color: WARM_GREY }}><b style={{ color: WARM_BLACK }}>{t.a}</b> · {t.r}</div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 13, color: BURGUNDY }}>{t.m}</div>
              </div>
            </div>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

/* ============================================================
   FINAL CTA
   ============================================================ */

function FinalCTA_Urgency({ onCTA }) {
  const w = useWindowWidth();
  const isMobile = w < 640;
  return (
    <section id="contact" data-screen-label="07 CTA" style={{ background: BURGUNDY, color: "#fff", padding: isMobile ? "80px 0" : "120px 0", borderRadius: isMobile ? "1rem" : "2rem", margin: isMobile ? "4px 8px" : "8px 32px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 80% 30%, rgba(255,255,255,0.12), transparent 60%)" }}/>
      <HContainer style={{ position: "relative", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "8px 16px", background: "rgba(255,255,255,0.12)", borderRadius: 9999, fontFamily: "Inter", fontSize: 12, fontWeight: 500, marginBottom: 28 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: "#66F3A6", boxShadow: "0 0 10px #66F3A6" }}/>
          3 LOCURI DISPONIBILE LUNA ACEASTA
        </div>
        <HHeading as="h2" style={{ fontSize: isMobile ? 40 : 72, color: "#fff", maxWidth: 900, margin: "0 auto", lineHeight: 0.95 }}>Acceptăm 3 clienți noi pe lună.</HHeading>
        <HBody style={{ color: "rgba(255,255,255,0.9)", margin: "24px auto 0", maxWidth: 640, fontSize: isMobile ? 17 : 20 }}>
          Analiza durează 30 de minute. Pleci cu 3 recomandări scrise pe email: ce să oprești, ce să scalezi, ce să măsori diferit. Indiferent dacă semnezi.
        </HBody>
        <div style={{ display: "inline-flex", gap: 16, marginTop: 40, flexWrap: "wrap" }}>
          <BCTA onClick={onCTA} variant="light">Programează analiza gratuită →</BCTA>
          <a href="mailto:office@aceads.co" style={{ textDecoration: "none" }}>
            <BCTA variant="ghost">office@aceads.co</BCTA>
          </a>
        </div>
      </HContainer>
    </section>
  );
}

function FinalCTA_Calendly({ onCTA }) {
  const days = Array.from({ length: 7 }, (_, i) => ({ d: 22 + i, day: ["M","M","J","V","S","D","L"][i] }));
  const times = ["10:00", "11:30", "14:00", "15:30", "17:00"];
  const [sel, setSel] = React.useState({ d: 2, t: 2 });
  return (
    <section id="contact" data-screen-label="07 CTA" style={{ background: WARM_BLACK, color: "#fff", padding: "120px 0" }}>
      <HContainer>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
          <div>
            <HOverline dark>PROGRAMEAZĂ</HOverline>
            <HHeading as="h2" style={{ fontSize: 56, color: "#fff", marginTop: 16, lineHeight: 1 }}>Alege o oră.<br/>Vorbim 30 min.</HHeading>
            <HBody style={{ color: "#D9D9D9", marginTop: 20 }}>Discovery call cu un strategist senior. Zero pitch, doar întrebări despre business-ul tău. Pleci cu 3 recomandări scrise.</HBody>
            <div style={{ display: "flex", gap: 20, marginTop: 28, fontFamily: "Inter", fontSize: 13, color: "#a0a0a0" }}>
              <span>✓ Fără pitch</span><span>✓ PDF după call</span><span>✓ Zero obligație</span>
            </div>
          </div>
          <div style={{ background: "rgba(255,255,255,0.03)", border: `1px solid ${BORDER_DARK}`, borderRadius: 24, padding: 28 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div style={{ fontFamily: "Inter", fontSize: 12, color: "#a0a0a0", textTransform: "uppercase", letterSpacing: "0.14em" }}>Aprilie 2026</div>
              <div style={{ fontFamily: "Inter", fontSize: 12, color: "#66F3A6" }}>● 3 sloturi disponibile</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 6, marginTop: 16 }}>
              {days.map((d,i) => (
                <button key={i} onClick={() => setSel({ ...sel, d: i })} style={{ border: `1px solid ${BORDER_DARK}`, background: sel.d === i ? BURGUNDY : "transparent", color: "#fff", borderRadius: 10, padding: "10px 0", cursor: "pointer", fontFamily: "Inter", fontSize: 12 }}>
                  <div style={{ opacity: 0.7 }}>{d.day}</div><div style={{ fontWeight: 600, fontSize: 16, marginTop: 2 }}>{d.d}</div>
                </button>
              ))}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 6, marginTop: 14 }}>
              {times.map((t,i) => (
                <button key={i} onClick={() => setSel({ ...sel, t: i })} style={{ border: `1px solid ${sel.t === i ? BURGUNDY : BORDER_DARK}`, background: sel.t === i ? BURGUNDY : "transparent", color: "#fff", borderRadius: 10, padding: "10px 0", fontFamily: "Inter", fontSize: 13, cursor: "pointer" }}>{t}</button>
              ))}
            </div>
            <div style={{ marginTop: 20 }}>
              <BCTA onClick={onCTA} style={{ width: "100%", justifyContent: "center" }}>Confirmă · {days[sel.d].d} Apr, {times[sel.t]} →</BCTA>
            </div>
          </div>
        </div>
      </HContainer>
    </section>
  );
}

function FinalCTA_Minimal({ onCTA }) {
  return (
    <section id="contact" data-screen-label="07 CTA" style={{ background: WARM_BLACK, color: "#fff", padding: "180px 0", position: "relative", overflow: "hidden" }}>
      <BGlow style={{ bottom: -300, left: "50%", transform: "translateX(-50%)" }}/>
      <HContainer style={{ position: "relative", textAlign: "center" }}>
        <HHeading as="h2" style={{ fontSize: 120, color: "#fff", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
          Următorul<br/>pas e <span style={{ color: BURGUNDY }}>al tău.</span>
        </HHeading>
        <div style={{ marginTop: 48 }}>
          <BCTA onClick={onCTA} size="lg" style={{ height: 64, padding: "0 40px", fontSize: 17 }}>Programează analiza →</BCTA>
        </div>
        <div style={{ marginTop: 24, fontFamily: "Inter", fontSize: 13, color: "#a0a0a0" }}>
          sau scrie la <a href="mailto:office@aceads.co" style={{ color: "#fff", textDecoration: "underline" }}>office@aceads.co</a>
        </div>
      </HContainer>
    </section>
  );
}

function FAQ_Section() {
  const [open, setOpen] = React.useState(null);
  const faqs = [
    {
      q: "Ce este ACE Agency și ce face?",
      a: "ACE Agency este o agenție de performance marketing din București care gestionează campanii Google Ads, Meta Ads, TikTok Ads și SEO pentru magazine online și branduri B2B din România. Scopul este creșterea revenue-ului măsurabil, nu a metricilor vanity. Fiecare client primește un senior dedicat, raport săptămânal și ROAS țintă contractual."
    },
    {
      q: "Ce rezultate concrete a obținut ACE Agency?",
      a: "Peste 5,4 milioane RON revenue atribuit din 6 industrii. Rezultate notabile: 8.11× ROAS Meta și +544% revenue pentru Amora, 13.34× ROAS Google și 2.38M RON revenue pentru ITMAR pe 16 luni, 6.05× ROAS Meta și -60% CPA pentru Trady, CPL de 52 lei (-87%) pentru doSense."
    },
    {
      q: "Cum funcționează contractul? Există clauze de 12 luni?",
      a: "Contracte flexibile de minimum 90 de zile, cu ROAS sau KPI țintă specificat contractual. Nu există contracte de 12 luni obligatorii. Fiecare client primește un senior dedicat, raport săptămânal pe venit real și audit gratuit înainte de semnare. Dacă nu livrăm, nu suntem blocați împreună."
    },
    {
      q: "Cum arată analiza gratuită de 30 de minute?",
      a: "Discovery call cu un strategist senior — zero pitch, doar întrebări despre business-ul tău. Pleci cu 3 recomandări scrise pe email: ce să oprești, ce să scalezi și ce să măsori diferit. Recomandările sunt trimise indiferent dacă semnezi sau nu."
    },
    {
      q: "Ce industrii și tipuri de business servește ACE Agency?",
      a: "Focus pe e-commerce cu tracțiune (beauty, home, IT, fashion) și servicii B2B cu ciclu de vânzare mediu-lung (wellness, HoReCa, educație profesională). Nu lucrăm cu business-uri la început de drum fără date sau fără buget media serios — nu putem garanta KPI-uri fără date reale."
    },
  ];
  const w = useWindowWidth();
  const isMobile = w < 640;
  return (
    <section id="faq" data-screen-label="08 FAQ" style={{ background: WARM_OFF, color: WARM_BLACK, padding: isMobile ? "60px 0" : "96px 0", borderRadius: isMobile ? "1rem" : "2rem", margin: isMobile ? "4px 8px" : "8px 32px" }}>
      <HContainer>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.8fr", gap: isMobile ? 32 : 72, alignItems: "start" }}>
          <div>
            <HOverline>ÎNTREBĂRI FRECVENTE</HOverline>
            <HHeading as="h2" style={{ fontSize: isMobile ? 36 : 48, marginTop: 16, color: WARM_BLACK }}>
              Înainte să ne <span style={{ color: BURGUNDY }}>contactezi.</span>
            </HHeading>
            <HBody style={{ color: WARM_GREY, marginTop: 20, fontSize: 16 }}>
              Cele mai comune întrebări de la prospecți. Dacă nu găsești răspunsul, scrie-ne direct.
            </HBody>
          </div>
          <div>
            {faqs.map((f, i) => (
              <div key={i} style={{ borderTop: `1px solid ${BORDER_LIGHT}`, paddingTop: 20, paddingBottom: 20 }}>
                <button
                  onClick={() => setOpen(open === i ? null : i)}
                  style={{ background: "none", border: "none", width: "100%", textAlign: "left", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, padding: 0 }}
                >
                  <span style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 18, color: WARM_BLACK, lineHeight: 1.35 }}>{f.q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: "50%", border: `1px solid ${BORDER_LIGHT}`, display: "inline-flex", alignItems: "center", justifyContent: "center", color: open === i ? BURGUNDY : WARM_GREY, fontSize: 18, fontWeight: 300, transition: "color 200ms", marginTop: 2 }}>
                    {open === i ? "−" : "+"}
                  </span>
                </button>
                {open === i && (
                  <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 16, color: WARM_GREY, marginTop: 14, lineHeight: 1.6, paddingRight: 44 }}>
                    {f.a}
                  </div>
                )}
              </div>
            ))}
            <div style={{ borderTop: `1px solid ${BORDER_LIGHT}` }}/>
          </div>
        </div>
      </HContainer>
    </section>
  );
}

/* ============================================================
   PORTFOLIO — AceWeb · AceMedia · AceAI (compact, proiecte reale)
   ============================================================ */

const portfolioRows = [
  {
    sub: "AceWeb",
    label: "Web Development",
    accentColor: "#4500D0",
    projects: [
      {
        name: "aceads.co",
        ctx: "Site agenție propriu",
        tag: "React + Vite + Supabase",
        badge: "Live acum",
        badgeGreen: true,
        href: null,
      },
      {
        name: "Landing pages campanii",
        ctx: "5+ clienți activi",
        tag: "A/B tested · CRO-focused",
        badge: "Google & Meta Ads",
        badgeGreen: false,
        href: null,
      },
      {
        name: "Magazine e-commerce",
        ctx: "Custom build per cerere",
        tag: "Next.js · Shopify",
        badge: "Per request",
        badgeGreen: false,
        href: null,
      },
    ],
  },
  {
    sub: "AceMedia",
    label: "Video Production",
    accentColor: BURGUNDY_BRIGHT,
    projects: [
      {
        name: "TikTok Spark Ads · ITMAR",
        ctx: "UGC-style · sub 30 sec",
        tag: "Parte din campania 13.34× ROAS",
        badge: "→ Case study",
        badgeGreen: false,
        href: "../case-studies/itmar.html",
      },
      {
        name: "Meta Reels · Amora",
        ctx: "Creative iterat săptămânal",
        tag: "Parte din campania 8.11× ROAS",
        badge: "→ Case study",
        badgeGreen: false,
        href: "../case-studies/amora.html",
      },
      {
        name: "YouTube Pre-roll",
        ctx: "Narrative · skippable",
        tag: "Brand awareness B2B",
        badge: "100 lei/video",
        badgeGreen: false,
        href: null,
      },
    ],
  },
  {
    sub: "AceAI",
    label: "AI Automations",
    accentColor: "#66F3A6",
    projects: [
      {
        name: "Lead qualification · aceads.co",
        ctx: "Form → Supabase → score → Calendly",
        tag: "n8n + AI scoring · activ pe acest site",
        badge: "Live acum",
        badgeGreen: true,
        href: null,
      },
      {
        name: "Auto-raportare campanii",
        ctx: "GA4 + Meta API → email / Slack",
        tag: "Zero muncă manuală",
        badge: "Per client",
        badgeGreen: false,
        href: null,
      },
      {
        name: "CRM sync + follow-up automat",
        ctx: "HubSpot / Pipedrive + webhooks",
        tag: "n8n · setup complet",
        badge: "→ Studiu de caz",
        badgeGreen: false,
        href: "#contact",
        cta: true,
      },
    ],
  },
];

function Portfolio_Section() {
  const w = useWindowWidth();
  const isMobile = w < 640;
  return (
    <section id="portofoliu" data-screen-label="06 Portfolio" style={{ background: WARM_BLACK, color: "#fff", padding: isMobile ? "48px 0" : "80px 0" }}>
      <HContainer>
        {/* Header compact */}
        <div style={{ marginBottom: isMobile ? 32 : 40 }}>
          <HOverline dark>PORTOFOLIU</HOverline>
          <HHeading as="h2" style={{ fontSize: isMobile ? "clamp(1.75rem,6vw,2rem)" : "clamp(2rem,4vw,2.5rem)", marginTop: 12, color: "#fff", lineHeight: 1.1 }}>
            Web · Video · AI — <span style={{ color: BURGUNDY_BRIGHT }}>exemple reale.</span>
          </HHeading>
        </div>

        {/* 3 rows */}
        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {portfolioRows.map((row, ri) => (
            <div key={ri} style={{ background: "rgba(255,255,255,0.02)", border: `1px solid ${BORDER_DARK}`, borderRadius: ri === 0 ? "20px 20px 4px 4px" : ri === 2 ? "4px 4px 20px 20px" : "4px", padding: isMobile ? "20px 16px" : "24px 28px" }}>
              {/* Row header */}
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
                <div style={{ width: 8, height: 8, borderRadius: "50%", background: row.accentColor, flexShrink: 0 }}/>
                <span style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: isMobile ? 16 : 18, color: "#fff" }}>{row.sub}</span>
                <span style={{ fontFamily: "Inter", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", color: "#a0a0a0" }}>· {row.label}</span>
              </div>
              {/* Projects grid */}
              <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3,1fr)", gap: isMobile ? 8 : 10 }}>
                {row.projects.map((p, pi) => {
                  const inner = (
                    <div style={{
                      padding: isMobile ? "14px 14px" : "16px 18px",
                      background: p.badgeGreen ? "rgba(102,243,166,0.06)" : "rgba(255,255,255,0.03)",
                      border: `1px solid ${p.cta ? row.accentColor + "40" : p.badgeGreen ? "rgba(102,243,166,0.2)" : BORDER_DARK}`,
                      borderRadius: 12,
                      display: "flex", flexDirection: isMobile ? "row" : "column",
                      justifyContent: isMobile ? "space-between" : "flex-start",
                      alignItems: isMobile ? "center" : "flex-start",
                      gap: isMobile ? 8 : 10,
                      cursor: p.href ? "pointer" : "default",
                      transition: "background 200ms",
                      minHeight: isMobile ? "auto" : 110,
                    }}>
                      <div>
                        <div style={{ fontFamily: "Inter", fontWeight: 600, fontSize: isMobile ? 13 : 14, color: "#fff", lineHeight: 1.3 }}>{p.name}</div>
                        {!isMobile && <div style={{ fontFamily: "Inter", fontSize: 12, color: "#a0a0a0", marginTop: 4, lineHeight: 1.4 }}>{p.ctx}</div>}
                        {!isMobile && <div style={{ fontFamily: "Inter", fontSize: 11, color: "#666", marginTop: 6 }}>{p.tag}</div>}
                      </div>
                      <div style={{ flexShrink: 0 }}>
                        <span style={{
                          display: "inline-block",
                          fontFamily: "Inter", fontSize: 11, fontWeight: 600,
                          padding: "3px 9px", borderRadius: 9999,
                          background: p.badgeGreen ? "rgba(102,243,166,0.15)" : p.cta ? `${row.accentColor}20` : "rgba(255,255,255,0.06)",
                          color: p.badgeGreen ? "#66F3A6" : p.cta ? row.accentColor : "#a0a0a0",
                          whiteSpace: "nowrap",
                        }}>{p.badge}</span>
                      </div>
                    </div>
                  );
                  return p.href
                    ? <a key={pi} href={p.href} style={{ textDecoration: "none" }}>{inner}</a>
                    : <div key={pi}>{inner}</div>;
                })}
              </div>
            </div>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

/* ============================================================
   CLIENTIB2B — Outbound automatizat
   ============================================================ */

function ClientiB2B_Section() {
  const w = useWindowWidth();
  const isMobile = w < 768;
  return (
    <section id="outbound" data-screen-label="09 ClientiB2B" style={{ background: WARM_OFF, color: WARM_BLACK, padding: isMobile ? "60px 0" : "96px 0", borderRadius: isMobile ? "1rem" : "2rem", margin: isMobile ? "4px 8px" : "8px 32px" }}>
      <HContainer>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 40 : 72, alignItems: "center" }}>
          {/* Left — text */}
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", background: "rgba(69,0,208,0.08)", borderRadius: 9999, border: "1px solid rgba(69,0,208,0.2)", marginBottom: 20 }}>
              <span style={{ fontFamily: "Inter", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.16em", color: "#4500D0" }}>Serviciu nou</span>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#66F3A6", display: "inline-block" }}/>
            </div>
            <HHeading as="h2" style={{ fontSize: isMobile ? 32 : 46, color: WARM_BLACK, lineHeight: 1.05 }}>
              Leads B2B prin outbound automatizat — fără să ridici telefonul.
            </HHeading>
            <HBody style={{ color: WARM_GREY, marginTop: 20, fontSize: 17, lineHeight: 1.65 }}>
              Paid ads aduce clientul care caută activ. Outbound-ul ajunge la clientul care nu știe încă că are nevoie de tine. Împreună acoperă întregul funnel de achiziție B2B.
            </HBody>
            <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                ["Infrastructure completă", "Domenii dedicate, DMARC/SPF/DKIM, warmup, deliverability monitorizat."],
                ["ICP research + copywriting", "Mesaje personalizate per segment. Rata reply 3–4%, nu spam."],
                ["8–12 leads calificați/lună", "Leads reale, nu clickuri. Reply rate > inboxuri generice de 10×."],
              ].map(([t, d], i) => (
                <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <div style={{ width: 24, height: 24, borderRadius: "50%", background: "rgba(69,0,208,0.1)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 2 }}>
                    <span style={{ color: "#4500D0", fontSize: 12, fontWeight: 700 }}>✓</span>
                  </div>
                  <div>
                    <span style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 16, color: WARM_BLACK }}>{t} — </span>
                    <span style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 15, color: WARM_GREY }}>{d}</span>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="https://clientib2b.ro" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "13px 28px", borderRadius: 9999, background: "#4500D0", color: "#fff", fontFamily: "Inter", fontSize: 14, fontWeight: 600, cursor: "pointer", textDecoration: "none" }}>
                Vezi clientib2b.ro →
              </a>
            </div>
          </div>
          {/* Right — visual card */}
          <div style={{ background: WARM_BLACK, borderRadius: 28, padding: isMobile ? 28 : 40, color: "#fff" }}>
            <div style={{ fontFamily: "Inter", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.18em", color: "#a0a0a0", marginBottom: 24 }}>Cum arată un ciclu de 30 zile</div>
            {[
              { n: "01", t: "Setup (zile 1–7)", d: "Domenii dedicate, warmup progresiv, ICP research, copywriting și A/B variante." },
              { n: "02", t: "Ramp-up (zile 8–21)", d: "Trimitere graduală, monitorizare deliverability, ajustare mesaje după reply rate." },
              { n: "03", t: "Leads (zile 22–30)", d: "8–12 leads calificați per lună livrați direct în CRM sau Google Sheets." },
            ].map((s, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 16, padding: "20px 0", borderTop: i === 0 ? "none" : `1px solid ${BORDER_DARK}` }}>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 24, color: "#4500D0", lineHeight: 1 }}>{s.n}</div>
                <div>
                  <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 17, color: "#fff" }}>{s.t}</div>
                  <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontSize: 14, color: "#D9D9D9", marginTop: 6, lineHeight: 1.55 }}>{s.d}</div>
                </div>
              </div>
            ))}
            <div style={{ marginTop: 28, padding: "16px 20px", background: "rgba(69,0,208,0.15)", borderRadius: 14, border: "1px solid rgba(69,0,208,0.3)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
              <div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 28, color: "#fff" }}>3–4%</div>
                <div style={{ fontFamily: "Inter", fontSize: 11, color: "#a0a0a0", marginTop: 4, textTransform: "uppercase", letterSpacing: "0.1em" }}>Reply rate mediu</div>
              </div>
              <div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 28, color: "#fff" }}>8–12</div>
                <div style={{ fontFamily: "Inter", fontSize: 11, color: "#a0a0a0", marginTop: 4, textTransform: "uppercase", letterSpacing: "0.1em" }}>Leads calificați/lună</div>
              </div>
              <div>
                <div style={{ fontFamily: "'Red Hat Display', Arial, sans-serif", fontWeight: 700, fontSize: 28, color: "#fff" }}>14–21 zile</div>
                <div style={{ fontFamily: "Inter", fontSize: 11, color: "#a0a0a0", marginTop: 4, textTransform: "uppercase", letterSpacing: "0.1em" }}>Ramp-up</div>
              </div>
            </div>
          </div>
        </div>
      </HContainer>
    </section>
  );
}

Object.assign(window, {
  Problem_Pain, Problem_Compare, Problem_Quote,
  Services_ROI, Services_Accent, Services_Tabs,
  Results_Full, Results_Cards, Results_Table,
  Testimonials_Big, Testimonials_Grid, Testimonials_Wall,
  FinalCTA_Urgency, FinalCTA_Calendly, FinalCTA_Minimal,
  FAQ_Section,
  Portfolio_Section, ClientiB2B_Section,
});