// Sample fix card — item 8, 27 from copy brief
// Shows concrete example before asking for signup
const SampleFix = () => {
  return (
    <section id="sample-fix" style={{ background: "var(--card)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="wrap" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          {/* Trust line — item 16 */}
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>
              <span className="dot"></span>See the kind of fix we produce before you request a report
            </div>
            <h2 className="display" style={{ fontSize: 44, margin: 0, fontVariationSettings: '"opsz" 60' }}>
              What a Fix Looks Like.
            </h2>
          </div>
          <div style={{
            background: "var(--bg)",
            border: "1px solid var(--border)",
            borderRadius: 16,
            padding: "40px 44px",
          }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
              {[
                ["Prompt gap:", '"best trail running shoes for wet conditions"'],
                ["What AI cited:", "Competitor category guides with product comparisons, terrain language, and updated buying advice."],
                ["What your store was missing:", "The category page listed products, but did not answer the comparison question AI was trying to resolve."],
                ["Recommended fix:", "Add a citation-ready category section that compares grip, waterproofing, terrain, and use case, then link priority products from that answer block."],
                ["Why it matters:", "AI engines tend to cite pages that directly answer the shopping question, not pages that only list products."],
              ].map(([label, text], i) => (
                <div key={i}>
                  <div style={{
                    fontFamily: "JetBrains Mono, monospace",
                    fontSize: 12,
                    textTransform: "uppercase",
                    letterSpacing: ".1em",
                    color: "var(--teal)",
                    marginBottom: 8,
                  }}>
                    {label}
                  </div>
                  <div style={{
                    fontSize: i === 0 ? 18 : 15.5,
                    lineHeight: 1.6,
                    color: i === 0 ? "var(--text)" : "var(--muted)",
                    fontWeight: i === 0 ? 500 : 400,
                  }}>
                    {text}
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div style={{
            marginTop: 32,
            textAlign: "center",
          }}>
            <a href="#contact" className="btn btn-primary">
              Request my citation report <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

window.SampleFix = SampleFix;