/* Features + Footer CTA */

const FEATURE_ITEMS = [
  {
    ico: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" /></svg>
    ),
    title: "Pay only for success",
    copy: "If we don't return content, you don't get charged. No false-positive billing. No edge-case surprise invoices."
  },
  {
    ico: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /></svg>
    ),
    title: "Universal HTTP",
    copy: "One POST endpoint. Works from any language, any runtime, anywhere. No SDK to install, no browser farm to run."
  },
  {
    ico: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
    ),
    title: "Sub-second median",
    copy: "1.2s median across the hardest sites in our benchmark. Faster than browser-based scrapers, often by 3-5×."
  },
  {
    ico: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path d="M3.6 9h16.8M3.6 15h16.8M12 3a14.5 14.5 0 010 18M12 3a14.5 14.5 0 000 18" /></svg>
    ),
    title: "Captcha-free",
    copy: "No CAPTCHA solving in the pipeline. We fingerprint and route around them, not through them — faster, cleaner, compliant."
  },
  {
    ico: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 19 21 12 17 5 21 12 2" /></svg>
    ),
    title: "Native AI inference",
    copy: "Extract structured fields on the way back. Skip the second hop through an LLM — JSON out, ready to use."
  },
  {
    ico: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18" /><path d="M9 21V9" /></svg>
    ),
    title: "Drop-in replacement",
    copy: "Same call shape as your existing provider. Swap the SDK in 30 seconds — no refactor, no new auth flow, no new infra."
  }
];

function FeaturesSection() {
  return (
    <section className="section" data-screen-label="Features">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>Why teams switch</div>
          <h2 style={{ marginTop: 18 }}>Built for the people<br />who scrape for a living.</h2>
        </div>
        <div className="features">
          {FEATURE_ITEMS.map((f) => (
            <div key={f.title} className="feature">
              <div className="ico">{f.ico}</div>
              <h3>{f.title}</h3>
              <p>{f.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section className="section" id="cta" data-screen-label="CTA">
      <div className="container">
        <div className="cta">
          <div className="eyebrow" style={{ margin: "0 auto" }}>
            <span className="dot"></span>Free tier · no card required
          </div>
          <h2 style={{ marginTop: 18 }}>Stop fighting <span className="grad-text">captchas.</span><br />Start shipping scrapers.</h2>
          <p className="lead lg" style={{ margin: "20px auto 0" }}>
            Free API key. First 1,000 requests on us. Plug it in and watch your success rate jump.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a className="btn primary lg" href="https://portal.usestring.ai/unblocker">Try now for free <span className="arr">→</span></a>
            <a className="btn lg" href="https://unblocker.usestring.ai/docs">Read the docs</a>
          </div>
          <div style={{ marginTop: 24, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.06em" }}>
            $ curl -X POST https://api.usestring.ai/v1/unblock
          </div>
        </div>
      </div>
    </section>
  );
}

window.FeaturesSection = FeaturesSection;
window.CTASection = CTASection;
