// Below-the-fold answers for cold ad traffic — rapid-fire, scannable in seconds.
// A 15–30s ad can't explain blueprints, pricing, follow-up, or learning,
// so we answer the obvious questions as punchy one-liners, then offer a 2nd CTA.

const BULLETS = [
  'Upload photos, video, or a voice memo',
  'Reads your blueprints — does the takeoff',
  'Prices it with live Home Depot material cost',
  'Follows up with the customer after you send',
  'Learns your numbers until it sounds like you',
];

// 21 trades. Edit this list to match your exact lineup.
const TRADES_21 = [
  'Flooring', 'Tile', 'Doors', 'Painting', 'Stucco',
  'EIFS', 'Siding', 'Landscaping', 'Roofing', 'Drywall & Framing',
  'Countertops', 'Cabinets', 'Framing', 'Concrete', 'Masonry',
  'Rough Carpentry', 'Finished Carpentry', 'Insulation', 'Plumbing', 'HVAC', 'Electrical',
];

function Tick() {
  return (
    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" style={{ flexShrink: 0, marginTop: 1 }} aria-hidden="true">
      <circle cx="8.5" cy="8.5" r="8.5" fill={C.ink} />
      <path d="M4.8 8.7l2.4 2.4 4.6-5" stroke={C.paper} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function HowItWorks() {
  return (
    <section className="learn" id="learn">
      <div className="learn-inner">
        <MonoLabel className="learn-eyebrow">What it actually does</MonoLabel>
        <h2 className="learn-h">This is not ChatGPT.</h2>

        <ul style={{ listStyle: 'none', margin: '0 0 4px', padding: 0, display: 'flex', flexDirection: 'column' }}>
          {BULLETS.map((b, i) => (
            <li key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 11,
              padding: '12px 0', borderTop: `1px solid ${C.rule}`,
            }}>
              <Tick />
              <span style={{
                fontFamily: F.ui, fontSize: 15.5, fontWeight: 500, lineHeight: 1.35,
                letterSpacing: '-0.01em', color: C.ink, textWrap: 'pretty',
              }}>{b}</span>
            </li>
          ))}
        </ul>

        <div className="trades">
          <div className="trades-head">
            <span className="trades-num">{TRADES_21.length}</span>
            <span className="trades-lbl">trades supported</span>
          </div>
          <div className="chips">
            {TRADES_21.map((t) => (
              <span className="chip" key={t}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Second CTA for people who scrolled — identical form design to the top.
function ClosingCta({ formStyle = 'plain', socialProof = false, compact = false }) {
  return (
    <section className="repeat" id="join-2">
      <div className="repeat-inner">
        <MonoLabel className="repeat-eyebrow">Launches July 1</MonoLabel>
        <h2 className="repeat-headline">Get your spot <em>before launch.</em></h2>
        <p className="repeat-sub">7-day free trial the day we open.</p>
        <div className="repeat-form">
          <OptInForm compact={compact} formStyle={formStyle} socialProof={socialProof} />
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;
window.ClosingCta = ClosingCta;