// Section components — Hero, Product, Insight
// Uses CSS variables set by theme.js

const Eyebrow = ({ children }) => (
  <div className="eyebrow">{children}</div>
);

const SectionLabel = ({ children }) => (
  <div className="section-label">{children}</div>
);

// ─── PDF Mockup ──────────────────────────────────────────────
const PDFMockup = () => (
  <div className="pdf-mockup">
    <div className="pdf-shadow" />
    {/* Inner page (left, behind) */}
    <div className="pdf-page pdf-inner">
      <div className="pdf-inner-head">
        <div className="pdf-inner-eyebrow">DIAGNÓSTICO PATRIMONIAL · 2026</div>
        <div className="pdf-inner-title">Análise de independência financeira</div>
      </div>
      <div className="pdf-chart">
        <div className="pdf-chart-axis">
          <span>R$</span>
          <span>10M</span>
          <span>5M</span>
          <span>1M</span>
        </div>
        <div className="pdf-chart-area">
          <svg viewBox="0 0 320 150" preserveAspectRatio="none">
            <defs>
              <linearGradient id="ga" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="var(--accent)" stopOpacity="0.35" />
                <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
              </linearGradient>
              <linearGradient id="gb" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="var(--fg-muted)" stopOpacity="0.18" />
                <stop offset="1" stopColor="var(--fg-muted)" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d="M0,140 L0,90 C40,82 70,72 110,55 C160,30 220,22 320,8 L320,150 L0,150 Z" fill="url(#ga)" />
            <path d="M0,140 L0,90 C40,82 70,72 110,55 C160,30 220,22 320,8" fill="none" stroke="var(--accent)" strokeWidth="1.4" />
            <path d="M0,145 L0,120 C50,116 100,112 160,100 C230,86 280,78 320,72 L320,150 L0,150 Z" fill="url(#gb)" />
            <path d="M0,145 L0,120 C50,116 100,112 160,100 C230,86 280,78 320,72" fill="none" stroke="var(--fg-muted)" strokeWidth="1" strokeDasharray="3 3" />
          </svg>
        </div>
        <div className="pdf-chart-x">
          <span>28</span><span>32</span><span>38</span><span>45</span><span>55</span>
        </div>
      </div>
      <div className="pdf-inner-rows">
        <div className="pdf-row"><span>Patrimônio líquido projetado</span><span>R$ 8,4M</span></div>
        <div className="pdf-row"><span>Renda passiva equivalente</span><span>R$ 42k/mês</span></div>
        <div className="pdf-row"><span>Independência financeira</span><span>aos 51 anos</span></div>
        <div className="pdf-row pdf-row-alt"><span>Cenário “começar em 5 anos”</span><span>aos 58 anos</span></div>
      </div>
      <div className="pdf-inner-foot">
        <span>Carlos Bezerra · CFP®</span>
        <span>Página 7 / 22</span>
      </div>
    </div>

    {/* Cover page (right, on top) */}
    <div className="pdf-page pdf-cover">
      <div className="pdf-cover-top">
        <div className="pdf-cover-eyebrow">DIAGNÓSTICO PATRIMONIAL</div>
        <div className="pdf-cover-meta">
          <span>Confidencial</span>
          <span>Maio · 2026</span>
        </div>
      </div>
      <div className="pdf-cover-mark">
        <div className="pdf-cover-mark-line" />
        <div className="pdf-cover-mark-num">001</div>
      </div>
      <div className="pdf-cover-bottom">
        <div className="pdf-cover-name">Para [Nome do médico]</div>
        <div className="pdf-cover-sub">Preparado por Carlos Bezerra · Café Wealth Management</div>
      </div>
    </div>
  </div>
);

// ─── Hero ────────────────────────────────────────────────────
const Hero = () => {
  const { hero } = CONTENT;
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-grid">
        <div className="hero-left">
          <Eyebrow>{hero.eyebrow}</Eyebrow>
          <h1 className="hero-title">
            {hero.title.map((line, i) => (
              <span key={i} className={`hero-line hero-line-${i}`}>
                <span>{line}</span>
              </span>
            ))}
          </h1>
        </div>
        <div className="hero-right">
          <div className="hero-photo">
            <img src="assets/hero.jpg" alt="Carlos Bezerra" style={{width:"100%",height:"100%",objectFit:"cover",objectPosition:"center top",display:"block"}} />
          </div>
          <div className="hero-photo-caption">
            <span>Carlos Bezerra</span>
            <span>São Paulo</span>
          </div>
        </div>
      </div>

      <div className="hero-foot">
        <p className="hero-sub">{hero.subtitle}</p>
        <div className="hero-cta-stack">
          <a href="#agendar" className="btn-primary">
            <span>{hero.cta}</span>
            <span className="btn-arrow">→</span>
          </a>
          <p className="hero-cta-sub">{hero.ctaSub}</p>
        </div>
      </div>

      <div className="hero-badges">
        {hero.badges.map((b, i) => (
          <div key={i} className="badge">
            <span className="badge-dot">●</span>
            <span>{b}</span>
          </div>
        ))}
      </div>
    </section>
  );
};

// ─── Product ─────────────────────────────────────────────────
const Product = () => {
  const { product } = CONTENT;
  return (
    <section className="product" data-screen-label="02 Produto">
      <SectionLabel>{product.section}</SectionLabel>
      <h2 className="display-h2">{product.headline}</h2>
      <p className="lead">{product.intro}</p>

      <div className="product-grid">
        <div className="product-items">
          {product.items.map((it, i) => (
            <div key={i} className="product-item reveal">
              <div className="product-item-num">{it.n}</div>
              <div className="product-item-body">
                <h3 className="product-item-title">{it.title}</h3>
                <p>{it.body}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="product-deliverable">
          <PDFStack src="assets/diagnostico.pdf" pages={[1, 2, 4]} />
          <div className="product-deliverable-cap">
            <span className="rule-tiny" />
            {product.deliverableCaption}
          </div>
        </div>
      </div>

      <div className="product-buy">
        <div className="product-buy-left">
          <div className="product-price">{product.price}</div>
          <div className="product-price-sub">{product.priceLine}</div>
        </div>
        <div className="product-buy-right">
          <a href="#agendar" className="btn-primary">
            <span>{product.cta}</span>
            <span className="btn-arrow">→</span>
          </a>
          <p className="product-subtext">{product.subtext}</p>
        </div>
      </div>
    </section>
  );
};

// ─── Insight ─────────────────────────────────────────────────
const Insight = () => {
  const { insight } = CONTENT;
  return (
    <section className="insight" data-screen-label="03 Insight">
      <SectionLabel light>{insight.section}</SectionLabel>
      <h2 className="display-h2 display-h2-deep">{insight.headline}</h2>
      <div className="insight-grid">
        <div className="insight-body">
          {insight.body.map((p, i) => (
            <p key={i} className="reveal">{p}</p>
          ))}
          <ul className="insight-list">
            {insight.list.map((li, i) => (
              <li key={i} className="reveal">
                <span className="insight-list-bullet">—</span>
                <span>{li}</span>
              </li>
            ))}
          </ul>
          <p className="insight-closer reveal">{insight.closer}</p>
        </div>
        <aside className="insight-pull reveal">
          <div className="insight-pull-mark">“</div>
          <p>{insight.pull}</p>
        </aside>
      </div>
    </section>
  );
};

Object.assign(window, { Hero, Product, Insight, PDFMockup });
