// Sections: Navbar, Hero, Case, Timeline, Pricing, Footer
const Icon = ({ name, size = 16, stroke = 2 }) => {
  const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "arrow-right": return (<svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case "play": return (<svg viewBox="0 0 24 24" {...s}><path d="M6 4l14 8-14 8V4z" fill="currentColor"/></svg>);
    case "check": return (<svg viewBox="0 0 24 24" {...s}><path d="M5 12l5 5L20 7"/></svg>);
    case "spark": return (<svg viewBox="0 0 24 24" {...s}><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M5 19l4-4M15 9l4-4"/></svg>);
    case "camera": return (<svg viewBox="0 0 24 24" {...s}><path d="M3 8a2 2 0 012-2h2l2-2h6l2 2h2a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"/><circle cx="12" cy="13" r="4"/></svg>);
    case "globe": return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a13 13 0 010 18M12 3a13 13 0 000 18"/></svg>);
    case "rocket": return (<svg viewBox="0 0 24 24" {...s}><path d="M5 19c2-2 4-2 6-1l-5 5c-1-2-1-4-1-4zM14 4c4 0 6 2 6 6l-7 7-5-5 6-8z"/><circle cx="14.5" cy="9.5" r="1.5"/></svg>);
    case "calendar": return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 11h18"/></svg>);
    case "users": return (<svg viewBox="0 0 24 24" {...s}><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 00-3-3.87M16 3.13A4 4 0 0119 7c0 1.5-.5 2.87-1.5 3.87"/></svg>);
    case "doc": return (<svg viewBox="0 0 24 24" {...s}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h6"/></svg>);
    case "trend": return (<svg viewBox="0 0 24 24" {...s}><path d="M3 17l6-6 4 4 8-8M14 7h7v7"/></svg>);
    case "target": return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>);
    case "x": return (<svg viewBox="0 0 24 24" {...s}><path d="M6 6l12 12M18 6L6 18"/></svg>);
    default: return null;
  }
};
window.Icon = Icon;

/* ---------- Navbar ---------- */
const Navbar = () => (
  <nav className="navbar glass">
    <a className="nav-brand" href="#top">
      <span className="eleve-mark"><img src="assets/eleve-logo.png" alt="Eleve" /></span>
      <span className="x">×</span>
      <img src="canevaslogo.jpg" alt="Canevas" className="nav-canevas-logo" />
      <span className="for">Canevas Pub</span>
    </a>
    <div className="nav-links">
      <a href="#case">Case</a>
      <a href="#entrega">Entregas</a>
      <a href="#valores">Valores</a>
    </div>
    <a className="btn btn-primary btn-sm" href="#contato">
      <span className="btn-cta-text">Conversar</span> <Icon name="arrow-right" size={14} stroke={2.4}/>
    </a>
  </nav>
);
window.Navbar = Navbar;

/* ---------- Hero ---------- */
const Hero = () => (
  <header className="hero" id="top">
    <div className="container hero-grid">
      <div>
        <div className="kicker-row reveal in">
          <span className="for-canevas">
            <span className="badge">C</span>
            Proposta para <b>@canevaspub</b>
          </span>
          <span className="muted" style={{fontSize:13}}>Maio 2026 · Confidencial</span>
        </div>
        <h1 className="display reveal in delay-1">
          Cresça <span className="accent">viral.</span><br/>
          Conquiste seu público.
        </h1>
        <p className="lede reveal in delay-2" style={{marginTop:24}}>
          Uma estratégia de 3 meses para transformar o palco do Canevas em
          presença digital — captação, conteúdo e tráfego orquestrados pela Eleve.
        </p>
        <div className="hero-cta reveal in delay-3">
          <a className="btn btn-primary" href="#valores">
            Ver investimento <Icon name="arrow-right" size={14} stroke={2.4}/>
          </a>
          <a className="btn btn-glass" href="#case">
            Ver case <Icon name="play" size={12} stroke={2}/>
          </a>
        </div>
        <div className="hero-meta reveal in delay-4">
          <span className="chip"><span className="b">3 meses</span> · Mai → Jul</span>
          <span className="chip"><span className="b">9 captações</span> previstas</span>
          <span className="chip chip-orange"><span className="b">+4M</span> views entregues no último case</span>
        </div>
      </div>

      <div className="hero-card glass-deep reveal in delay-2">
        <div className="float-deco float-1"></div>
        <div className="float-deco float-2"></div>
        <div className="top">
          <div className="ig-handle">
            <div className="av"><div style={{background:"url('clara.jpg') center/cover"}}></div></div>
            <div>
              <h4>@claramachadofit2</h4>
              <p>65K seguidores · Criadora de conteúdo</p>
            </div>
          </div>
          <span className="live" style={{background:"rgba(10,180,100,.12)", color:"#0AB464"}}>
            <span style={{width:6,height:6,borderRadius:999,background:"#0AB464",display:"inline-block"}}></span>
            CASE
          </span>
        </div>
        <div>
          <div className="big-stat">
            <Counter end={4099016}/>
          </div>
          <div className="big-stat-label">Views entregues pela Eleve · @claramachadofit2 (Mar/26)</div>
        </div>
        <div className="bottom-grid">
          <div className="mini">
            <div className="v up tabular"><Counter end={1106586}/></div>
            <div className="l">Contas alcançadas</div>
          </div>
          <div className="mini">
            <div className="v up tabular"><Counter end={50} suffix="%" decimals={1}/></div>
            <div className="l">Reels do alcance total</div>
          </div>
        </div>
      </div>
    </div>
  </header>
);
window.Hero = Hero;