/* Shared building blocks for platform/contact pages */

function PageHero({ eyebrow, title, italic, lead, primary, secondary, micro, signals, aside, crumb, basePath = "../" }) {
  useReveal();
  return (
    <section className="page-hero">
      <div className="container">
        <div className="crumb reveal" style={{marginBottom: 24}}>
          <a href={basePath || "/"}>Auctera</a>
          <span>›</span>
          <span>{crumb || "Platform"}</span>
        </div>
        <div className="hero-two reveal">
          <div>
            <div className="eyebrow eyebrow-dot" style={{marginBottom: 24}}>{eyebrow}</div>
            <h1 className="display-2" style={{marginBottom: 24}}>
              {title}{italic && <> <span className="h-italic">{italic}</span></>}
            </h1>
            <p className="lead" style={{marginBottom: 32}}>{lead}</p>
            <div style={{display:"flex", gap:12, flexWrap:"wrap", marginBottom: micro ? 16 : 0}}>
              {primary && <a className="btn btn-lg" href={primary.href || (basePath + "pages/contact")}>{primary.label} <Arrow/></a>}
              {secondary && <a className="btn btn-ghost btn-lg" href={secondary.href || "#"}>{secondary.label}</a>}
            </div>
            {micro && <p className="mono" style={{marginTop:14}}>{micro}</p>}
          </div>
          <div>{aside}</div>
        </div>
        {signals && (
          <div className="grid grid-4 reveal-stagger" style={{marginTop: 44, paddingTop: 32, borderTop: "1px solid var(--line)", gap: 32}}>
            {signals.map((s,i)=>(
              <div key={i} className="stat">
                <div className="num" style={{fontSize: 40}}>{s[0]}</div>
                <div className="label">{s[1]}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

function SectionHeader({ eyebrow, title, italic, lead, center, actions }) {
  return (
    <div className={`blockheader reveal ${center?"center":""}`}>
      {eyebrow && <div className="eyebrow eyebrow-dot">{eyebrow}</div>}
      <h2 className="display-2">{title}{italic && <> <span className="h-italic">{italic}</span></>}</h2>
      {lead && <p className="lead">{lead}</p>}
      {actions && <div style={{display:"flex", gap:12, flexWrap:"wrap", marginTop: 8}}>{actions}</div>}
    </div>
  );
}

function FinalCTASection({ title, italic, body, primary, secondary, micro }) {
  useReveal();
  return (
    <section className="section">
      <div className="container">
        <div className="cta-dark reveal">
          <div style={{display:"grid", gridTemplateColumns:"1fr auto", gap:40, alignItems:"end", flexWrap:"wrap"}}>
            <div>
              <h2 className="display-2" style={{color:"var(--paper)", marginBottom:16}}>{title}{italic && <> <span className="h-italic" style={{color:"var(--ochre)"}}>{italic}</span></>}</h2>
              {body && <p className="lead" style={{color:"rgba(246,242,236,0.75)", maxWidth:"52ch"}}>{body}</p>}
              {micro && <p className="mono" style={{color:"rgba(246,242,236,0.55)", marginTop:20}}>{micro}</p>}
            </div>
            <div style={{display:"flex", gap:12, flexWrap:"wrap"}}>
              {primary && <a className="btn btn-ochre btn-lg" href={primary.href}>{primary.label} <Arrow/></a>}
              {secondary && <a className="btn btn-ghost btn-lg" href={secondary.href}>{secondary.label}</a>}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Benefits({ items }) {
  useReveal();
  return (
    <div className="linegrid reveal">
      {[0,1].map(row => (
        <div key={row} className="linegrid-row">
          {items.slice(row*2, row*2+2).map((b,i)=>(
            <div key={i} className="linegrid-cell">
              <h4>{b.title}</h4>
              <p>{b.body}</p>
              {b.callout && <div className="callout"><span className="rule-ochre"/>{b.callout}</div>}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function FitSplit({ good, bad }) {
  useReveal();
  return (
    <div className="grid grid-2 reveal-stagger">
      <div className="card" style={{padding: 40}}>
        <div className="mono" style={{marginBottom:14, color:"var(--ochre-deep)"}}>GOOD FIT IF…</div>
        <ul className="checklist">
          {good.map((g,i)=>(<li key={i}><div><div style={{fontWeight:500}}>{g.title}</div><div style={{color:"var(--muted)", fontSize:14, marginTop:4}}>{g.body}</div></div></li>))}
        </ul>
      </div>
      <div className="card" style={{padding: 40, background:"var(--paper-2)"}}>
        <div className="mono" style={{marginBottom:14}}>NOT FOR YOU IF…</div>
        <ul className="checklist neg">
          {bad.map((b,i)=>(<li key={i}>{b}</li>))}
        </ul>
      </div>
    </div>
  );
}

function UseCases({ items }) {
  useReveal();
  return (
    <div className="grid reveal-stagger" style={{gap:24}}>
      {items.map((u,i)=>(
        <div key={i} className="card" style={{padding: 40, display:"grid", gridTemplateColumns:"auto 1fr 1fr", gap: 40, alignItems:"start"}}>
          <div style={{fontFamily:"var(--font-display)", fontStyle:"italic", fontSize:56, lineHeight:1, letterSpacing:"-0.02em", color:"var(--ochre)"}}>0{i+1}</div>
          <div>
            <div className="mono" style={{marginBottom:10}}>PROBLEM</div>
            <h4 style={{fontFamily:"var(--font-display)", fontSize:24, margin:"0 0 12px", lineHeight:1.2, letterSpacing:"-0.005em"}}>{u.title}</h4>
            <p style={{color:"var(--muted)", margin:0, fontSize:15}}>{u.problem}</p>
          </div>
          <div style={{paddingLeft:32, borderLeft:"1px solid var(--line)"}}>
            <div className="mono" style={{marginBottom:10, color:"var(--ochre-deep)"}}>TRANSPARENT RESOLUTION</div>
            <p style={{color:"var(--ink-2)", margin:0, fontSize:15, lineHeight:1.6}}>{u.solution}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function PhaseList({ phases }) {
  useReveal();
  return (
    <div className="grid grid-4 reveal-stagger">
      {phases.map((p,i)=>(
        <div key={i} style={{borderTop:"1px solid var(--line-strong)", paddingTop:24}}>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom: 20}}>
            <div style={{fontFamily:"var(--font-display)", fontSize:48, lineHeight:1, letterSpacing:"-0.02em"}}>{p.num}</div>
            <div className="mono">{p.timeline}</div>
          </div>
          <div className="mono" style={{marginBottom:8}}>PHASE {p.num}</div>
          <h4 style={{fontFamily:"var(--font-display)", fontSize:22, margin:"0 0 10px", lineHeight:1.15}}>{p.title}</h4>
          <p style={{color:"var(--muted)", margin:0, fontSize:14.5}}>{p.body}</p>
        </div>
      ))}
    </div>
  );
}

/* ==========================================================
 * NEW BUILDING BLOCKS — Solutions / Capabilities / About
 * Additive only; does not modify existing components.
 * ========================================================== */

/* Problem / Resolution narrative block — used by Solutions pages */
function ProblemResolution({ problem, resolution }) {
  useReveal();
  return (
    <div className="reveal" style={{
      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
      border: "1px solid var(--line)", borderRadius: 18, overflow: "hidden", background: "var(--paper)"
    }}>
      <div style={{ padding: "clamp(36px,4vw,56px)", borderRight: "1px solid var(--line)", background: "var(--paper-2)" }}>
        <div className="mono" style={{ marginBottom: 14 }}>{problem.eyebrow || "THE PROBLEM"}</div>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px,3vw,40px)", margin: "0 0 20px", lineHeight: 1.1 }}>{problem.title}</h3>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14 }}>
          {problem.points.map((p, i) => (
            <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, color: "var(--muted)", fontSize: 15 }}>
              <span style={{ fontFamily: "var(--font-mono)", color: "var(--ochre-deep)", fontSize: 11 }}>0{i+1}</span>
              <span>{p}</span>
            </li>
          ))}
        </ul>
      </div>
      <div style={{ padding: "clamp(36px,4vw,56px)" }}>
        <div className="mono" style={{ marginBottom: 14, color: "var(--ochre-deep)" }}>{resolution.eyebrow || "HOW AUCTERA HELPS"}</div>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px,3vw,40px)", margin: "0 0 20px", lineHeight: 1.1 }}>{resolution.title}</h3>
        <ul className="checklist">
          {resolution.points.map((p, i) => <li key={i}>{p}</li>)}
        </ul>
      </div>
    </div>
  );
}

/* Capability blocks — 4-up with supporting detail.
   Used by Capabilities pages + Solutions "What you get" sections. */
function CapabilityBlocks({ items, columns = 2 }) {
  useReveal();
  return (
    <div className="grid reveal-stagger" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 0, border: "1px solid var(--line)", borderRadius: 18, overflow: "hidden", background: "var(--paper)" }}>
      {items.map((it, i) => {
        const col = i % columns;
        const row = Math.floor(i / columns);
        return (
          <div key={i} style={{
            padding: "clamp(32px,3vw,48px)",
            borderRight: col < columns - 1 ? "1px solid var(--line)" : "none",
            borderTop: row > 0 ? "1px solid var(--line)" : "none"
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
              <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 32, color: "var(--ochre-deep)", lineHeight: 1 }}>0{i+1}</span>
              <span className="mono">{it.tag || "CAPABILITY"}</span>
            </div>
            <h4 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px,2.4vw,32px)", margin: "0 0 14px", lineHeight: 1.15, letterSpacing: "-0.01em" }}>{it.title}</h4>
            <p style={{ color: "var(--ink-2)", margin: "0 0 18px", fontSize: 16, lineHeight: 1.55 }}>{it.body}</p>
            {it.detail && (
              <div style={{ padding: "14px 18px", background: "var(--paper-2)", borderRadius: 10, borderLeft: "2px solid var(--ochre)" }}>
                <p style={{ margin: 0, fontSize: 13.5, color: "var(--muted)", fontStyle: "italic" }}>{it.detail}</p>
              </div>
            )}
            {it.callout && !it.detail && (
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", color: "var(--ochre-deep)", textTransform: "uppercase" }}>
                <span style={{ display: "inline-block", width: 20, height: 1, background: "var(--ochre)", verticalAlign: "middle", marginRight: 10 }}/>{it.callout}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

/* Numbered steps — used in "How It Works" sections within Solutions/Capabilities pages */
function NumberedSteps({ steps, compact = false }) {
  useReveal();
  return (
    <div className="reveal-stagger" style={{ display: "grid", gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: 0, border: "1px solid var(--line)", borderRadius: 18, overflow: "hidden", background: "var(--paper)" }}>
      {steps.map((s, i) => (
        <div key={i} style={{
          padding: compact ? "28px 28px" : "clamp(28px,3vw,44px)",
          borderRight: i < steps.length - 1 ? "1px solid var(--line)" : "none",
          position: "relative"
        }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 18 }}>
            <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 42, color: "var(--ochre-deep)", lineHeight: 1 }}>0{i+1}</span>
            {i < steps.length - 1 && (
              <svg width="20" height="14" viewBox="0 0 20 14" fill="none" style={{ opacity: 0.4 }}>
                <path d="M1 7h17m-5-5l5 5-5 5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
              </svg>
            )}
          </div>
          <h4 style={{ fontFamily: "var(--font-display)", fontSize: compact ? 20 : 22, margin: "0 0 10px", lineHeight: 1.2 }}>{s.title}</h4>
          <p style={{ color: "var(--muted)", fontSize: 14.5, margin: 0, lineHeight: 1.55 }}>{s.body}</p>
        </div>
      ))}
    </div>
  );
}

/* Stages list — e.g. Growing Brands / Mid-Market / Enterprise in advertisers */
function StageCards({ stages }) {
  useReveal();
  return (
    <div className="grid grid-3 reveal-stagger">
      {stages.map((s, i) => (
        <div key={i} className="card" style={{ padding: "clamp(28px,3vw,40px)", display: "flex", flexDirection: "column", gap: 18 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span className="mono" style={{ color: "var(--ochre-deep)" }}>STAGE 0{i+1}</span>
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
              <circle cx="18" cy="18" r="17" stroke="var(--line-strong)" strokeWidth="1"/>
              {[...Array(i+1)].map((_, j) => (
                <circle key={j} cx={12 + j*6} cy="18" r="2.5" fill="var(--ochre)"/>
              ))}
            </svg>
          </div>
          <h4 style={{ fontFamily: "var(--font-display)", fontSize: 28, margin: 0, lineHeight: 1.1 }}>{s.title}</h4>
          <p style={{ color: "var(--muted)", margin: 0, fontSize: 15, lineHeight: 1.55 }}>{s.body}</p>
          {s.points && (
            <ul style={{ listStyle: "none", padding: 0, margin: "auto 0 0", display: "grid", gap: 10, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
              {s.points.map((p, j) => (
                <li key={j} style={{ fontSize: 13.5, color: "var(--ink-2)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 10 }}>
                  <span style={{ color: "var(--ochre-deep)", fontFamily: "var(--font-mono)", fontSize: 10 }}>◆</span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </div>
  );
}

/* Pill / chip cloud — segment lists */
function ChipCloud({ items, eyebrow }) {
  useReveal();
  return (
    <div className="reveal" style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
      {items.map((it, i) => (
        <span key={i} style={{
          padding: "12px 20px",
          border: "1px solid var(--line-strong)",
          borderRadius: 999,
          fontFamily: "var(--font-sans)",
          fontSize: 14.5,
          color: "var(--ink)",
          background: "var(--paper)",
          display: "inline-flex", alignItems: "center", gap: 8
        }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ochre)" }}/>
          {it}
        </span>
      ))}
    </div>
  );
}

/* Feature group grid — 3 groups with bulleted features each */
function FeatureGroups({ groups }) {
  useReveal();
  return (
    <div className="grid grid-3 reveal-stagger">
      {groups.map((g, i) => (
        <div key={i} style={{ padding: "clamp(28px,3vw,40px)", background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 18 }}>
          <div className="mono" style={{ marginBottom: 8, color: "var(--ochre-deep)" }}>GROUP 0{i+1}</div>
          <h4 style={{ fontFamily: "var(--font-display)", fontSize: 26, margin: "0 0 24px", lineHeight: 1.15 }}>{g.title}</h4>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14 }}>
            {g.items.map((it, j) => (
              <li key={j} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, alignItems: "baseline", fontSize: 15, color: "var(--ink-2)", paddingBottom: 14, borderBottom: j < g.items.length - 1 ? "1px solid var(--line)" : "none" }}>
                <span style={{ fontFamily: "var(--font-mono)", color: "var(--muted)", fontSize: 10 }}>{String(j+1).padStart(2,"0")}</span>
                <span>{it}</span>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

/* Principles grid — 6 numbered brand principles (About page) */
function PrincipleGrid({ principles }) {
  useReveal();
  return (
    <div className="reveal-stagger" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--line)", borderRadius: 18, overflow: "hidden", background: "var(--paper)" }}>
      {principles.map((p, i) => {
        const col = i % 3, row = Math.floor(i / 3);
        return (
          <div key={i} style={{
            padding: "clamp(32px,3vw,48px)",
            borderRight: col < 2 ? "1px solid var(--line)" : "none",
            borderTop: row > 0 ? "1px solid var(--line)" : "none"
          }}>
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 48, color: "var(--ochre-deep)", lineHeight: 1, marginBottom: 20 }}>0{i+1}</div>
            <h4 style={{ fontFamily: "var(--font-display)", fontSize: 24, margin: "0 0 12px", lineHeight: 1.15 }}>{p.title}</h4>
            <p style={{ color: "var(--muted)", margin: 0, fontSize: 15, lineHeight: 1.6 }}>{p.body}</p>
          </div>
        );
      })}
    </div>
  );
}

/* Problem + italic quote pairs — About page "Why we built this" */
function QuoteProblems({ items }) {
  useReveal();
  return (
    <div className="reveal-stagger" style={{ display: "grid", gap: 0 }}>
      {items.map((it, i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "clamp(80px, 8vw, 120px) 1fr 1.2fr", gap: "clamp(24px, 4vw, 48px)",
          padding: "clamp(32px, 3vw, 48px) 0",
          borderTop: i === 0 ? "1px solid var(--line-strong)" : "none",
          borderBottom: "1px solid var(--line-strong)",
          alignItems: "start"
        }}>
          <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "clamp(48px, 5vw, 64px)", color: "var(--ochre-deep)", lineHeight: 0.9 }}>0{i+1}</span>
          <div>
            <div className="mono" style={{ marginBottom: 10 }}>PROBLEM</div>
            <h4 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(22px, 2.4vw, 32px)", margin: 0, lineHeight: 1.2 }}>{it.title}</h4>
          </div>
          <div style={{ borderLeft: "2px solid var(--ochre)", paddingLeft: "clamp(20px, 3vw, 32px)" }}>
            <div className="mono" style={{ marginBottom: 10, color: "var(--ochre-deep)" }}>OPERATOR NOTE</div>
            <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "clamp(18px, 1.8vw, 24px)", margin: 0, color: "var(--ink)", lineHeight: 1.35 }}>"{it.quote}"</p>
          </div>
        </div>
      ))}
    </div>
  );
}

/* Outcome stats — 3-up or 4-up large stat row used on Solutions pages */
function OutcomeStats({ stats }) {
  useReveal();
  return (
    <div className="reveal-stagger" style={{ display: "grid", gridTemplateColumns: `repeat(${stats.length}, 1fr)`, gap: 0, border: "1px solid var(--line)", borderRadius: 18, overflow: "hidden" }}>
      {stats.map((s, i) => (
        <div key={i} style={{ padding: "clamp(32px,3vw,48px)", borderRight: i < stats.length - 1 ? "1px solid var(--line)" : "none", background: "var(--paper)" }}>
          <div className="mono" style={{ marginBottom: 16 }}>{s.label}</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(36px,4vw,56px)", lineHeight: 1, letterSpacing: "-0.02em", marginBottom: 10 }}>{s.value}</div>
          {s.sub && <p style={{ color: "var(--muted)", margin: 0, fontSize: 14 }}>{s.sub}</p>}
        </div>
      ))}
    </div>
  );
}

/* Toggle audience / comparison (reusable two-sided) */
function AudienceToggle({ options, value, onChange }) {
  return (
    <div style={{ display: "inline-flex", padding: 4, background: "var(--paper-2)", border: "1px solid var(--line)", borderRadius: 999 }}>
      {options.map(o => (
        <button key={o.id} onClick={() => onChange(o.id)} style={{
          padding: "10px 22px", borderRadius: 999, border: "none", cursor: "pointer",
          background: value === o.id ? "var(--ink)" : "transparent",
          color: value === o.id ? "var(--paper)" : "var(--ink)",
          fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 500, transition: "all .15s"
        }}>{o.label}</button>
      ))}
    </div>
  );
}

/* Related / see-also cross-links strip */
function RelatedLinks({ items, basePath = "" }) {
  useReveal();
  return (
    <div className="reveal-stagger" style={{ display: "grid", gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 0, border: "1px solid var(--line)", borderRadius: 18, overflow: "hidden", background: "var(--paper)" }}>
      {items.map((it, i) => (
        <a key={i} href={basePath + it.href} style={{
          padding: "clamp(28px,3vw,40px)",
          borderRight: i < items.length - 1 ? "1px solid var(--line)" : "none",
          textDecoration: "none", color: "var(--ink)",
          display: "flex", flexDirection: "column", gap: 10, transition: "background .2s"
        }} onMouseEnter={e=>e.currentTarget.style.background="var(--paper-2)"} onMouseLeave={e=>e.currentTarget.style.background="var(--paper)"}>
          <div className="mono" style={{ color: "var(--ochre-deep)" }}>{it.eyebrow || "SEE ALSO"}</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 24, lineHeight: 1.15, letterSpacing: "-0.005em" }}>{it.title}</div>
          <div style={{ color: "var(--muted)", fontSize: 14 }}>{it.desc}</div>
          <div style={{ marginTop: "auto", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", color: "var(--ochre-deep)" }}>EXPLORE →</div>
        </a>
      ))}
    </div>
  );
}

function LogoCloud() {
  const logos = [
    { name: "Walmart", src: "walmart.png" },
    { name: "Nike", src: "nike.png" },
    { name: "Samsung", src: "samsung.png" },
    { name: "Uber", src: "uber.png" },
    { name: "Agoda", src: "agoda.svg" },
    { name: "Decathlon", src: "decathlon.png" },
    { name: "Nespresso", src: "nespresso.png" },
    { name: "Forever 21", src: "forever21.png" },
    { name: "Lotto", src: "lotto.jpg" },
    { name: "Bershka", src: "bershka.jpg" },
    { name: "Mango", src: "mango.png" },
    { name: "Samsonite", src: "samsonite.jpg" },
    { name: "Motorola", src: "motorola.png" },
    { name: "Psafe", src: "psafe.jpg" },
    { name: "XT", src: "xt.jpg" },
    { name: "Movavi", src: "movavi.png" },
    { name: "Chicco", src: "chicco.jpg" },
    { name: "Electrolux", src: "electrolux.jpg" },
    { name: "Alibaba", src: "alibaba.jpg" },
    { name: "Bitgate", src: "bitgate.jpg" },
    { name: "LightInTheBox", src: "lightinthebox.jpg" },
    { name: "PatPat", src: "patpat.png" },
    { name: "Oziva", src: "oziva.jpg" },
    { name: "Vivo", src: "vivo.jpg" }
  ];

  return (
    <section className="section logo-cloud-section" style={{background: "var(--paper-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)"}}>
      <div className="container">
        <div style={{textAlign: "center", marginBottom: 64}}>
          <div className="eyebrow eyebrow-dot" style={{display: "inline-flex", justifyContent: "center", width: "auto"}}>
            Trusted by global commerce leaders
          </div>
        </div>
        <div className="logo-grid">
          {logos.map((logo, i) => (
            <div key={i} className="logo-item">
              <img 
                src={`uploads/customer_logos/${logo.src}`} 
                alt={logo.name} 
                title={logo.name}
                style={{
                  transform: logo.name === "Samsung" ? "scale(2.2)" : "none",
                  transformOrigin: "center"
                }}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LegalContent({ sections }) {
  return (
    <section className="section">
      <div className="container">
        <div className="legal-layout">
          <div className="legal-nav">
            <div className="mono" style={{marginBottom: 20, color: "var(--muted-2)"}}>CONTENTS</div>
            <ul className="legal-toc">
              {sections.map((s, i) => (
                <li key={i}><a href={`#section-${i}`}>{s.title}</a></li>
              ))}
            </ul>
          </div>
          <div className="legal-body">
            {sections.map((s, i) => (
              <div key={i} id={`section-${i}`} className="legal-section">
                <h3>{s.title}</h3>
                <div className="legal-text">{s.content}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ConferenceSection() {
  const events = [
    { name: "Affiliate World Conferences", loc: "Global" },
    { name: "Affiliate Summit", loc: "Las Vegas / New York" },
    { name: "DMEXCO", loc: "Cologne" },
    { name: "Adtech", loc: "London / Tokyo" },
    { name: "Mobile World Congress", loc: "Barcelona" },
    { name: "GITEX", loc: "Dubai" },
    { name: "Token 2049", loc: "Singapore / Dubai" }
  ];

  return (
    <section className="section conference-section" style={{background: "var(--ink)", color: "var(--paper)"}}>
      <div className="container">
        <div className="blockheader reveal">
          <div className="eyebrow eyebrow-dot" style={{color: "rgba(246,242,236,0.6)"}}>Initialize offline connectivity</div>
          <h2 className="display-2" style={{color: "var(--paper)"}}>Meet Us <span className="h-italic" style={{color: "var(--ochre)"}}>In Person.</span></h2>
          <p className="lead" style={{color: "rgba(246,242,236,0.72)"}}>Attending TES or Affiliate World? Let's discuss performance architecture face-to-face. Secure your meeting slot below.</p>
          <div>
            <a className="btn btn-ochre btn-lg" href="contact">Book a meeting <Arrow/></a>
          </div>
        </div>

        <div className="grid grid-4 reveal-stagger" style={{marginTop: 64}}>
          {events.map((e, i) => (
            <div key={i} style={{padding: "24px 0", borderTop: "1px solid rgba(246,242,236,0.12)"}}>
              <div className="mono" style={{color: "var(--ochre)", fontSize: 10, marginBottom: 8}}>0{i + 1} · EVENT</div>
              <h4 style={{fontFamily: "var(--font-display)", fontSize: 20, marginBottom: 4}}>{e.name}</h4>
              <p style={{color: "rgba(246,242,236,0.55)", fontSize: 13, margin: 0}}>{e.loc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  PageHero, SectionHeader, FinalCTASection, Benefits, FitSplit, UseCases, PhaseList,
  ProblemResolution, CapabilityBlocks, NumberedSteps, StageCards, ChipCloud, FeatureGroups,
  PrincipleGrid, QuoteProblems, OutcomeStats, AudienceToggle, RelatedLinks, LogoCloud, LegalContent,
  ConferenceSection
});
