/* global React */
/* Marketing sections for Adam Checks landing. Exports to window. */

const PHONE = "213-259-2977";
const WA_LINK = "https://wa.me/12132592977";

function WAIcon({ size = 20, color = "#04130C" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.02h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.22 8.22 0 0 1-1.26-4.35c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.2-8.06 8.2zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.42-.14 0-.31-.02-.47-.02-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.24 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z"/>
    </svg>
  );
}

/* ---- TRUST BAR ---- */
function TrustBar() {
  const stores = ["Walmart", "No Frills", "Food Basics", "Real Canadian Superstore", "FreshCo"];
  return (
    <section className="section-tight" style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--paper-2)" }}>
      <div className="wrap" style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
          <div style={{ width: 42, height: 42, borderRadius: 11, background: "var(--wa-green)", color: "#04130C", display: "grid", placeItems: "center" }}><Tick size={22} color="#04130C" /></div>
          <div style={{ lineHeight: 1.25 }}>
            <div style={{ fontWeight: 800, fontSize: 15 }}>Verified halal answers</div>
            <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>Checked against trusted certification data — not guesswork</div>
          </div>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center" }}>
          <span style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-faint)", letterSpacing: ".06em" }}>PRICES FROM</span>
          {stores.map((s) => (
            <span key={s} className="pill" style={{ background: "#fff" }}>{s}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- PROBLEM ---- */
function Problem() {
  return (
    <section className="section reveal" id="why">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 56, alignItems: "center" }}>
        <div>
          <span className="eyebrow">The aisle moment</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            You’re holding the product,<br />flipping it over, squinting<br />at the ingredients —
            <span style={{ color: "var(--haram)" }}> and still not sure.</span>
          </h2>
          <p className="lead" style={{ marginTop: 22, maxWidth: 520 }}>
            Every Muslim in Canada knows the feeling. Is this chicken actually zabiha? Is that restaurant really certified, or just claiming to be?
          </p>
          <p style={{ marginTop: 16, fontSize: 22, fontWeight: 800, fontFamily: "var(--font-display)", color: "var(--wa-deep)" }}>
            Adam removes the doubt. Completely.
          </p>
        </div>
        <div style={{ display: "grid", gap: 14 }}>
          {[
            { q: "“Does this have pork enzymes?”", t: "haram" },
            { q: "“Is this gelatin halal?”", t: "unclear" },
            { q: "“Is this place actually certified?”", t: "unclear" },
            { q: "“Where’s the cheapest halal chicken?”", t: "halal" },
          ].map((x, i) => (
            <div key={i} className="problem-card" style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 18px", background: "#fff", border: "1px solid var(--line)", borderRadius: "var(--r-md)", boxShadow: "var(--shadow-sm)", transform: `translateX(${i % 2 ? 22 : 0}px)` }}>
              <span style={{ fontSize: 22 }}>🤔</span>
              <span style={{ fontWeight: 600, fontSize: 16 }}>{x.q}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- FEATURES ---- */
function FeatureRow({ index, eyebrow, title, body, bullets, accent, children, flip }) {
  return (
    <div className="reveal" style={{ display: "grid", gridTemplateColumns: flip ? ".95fr 1.05fr" : "1.05fr .95fr", gap: 56, alignItems: "center", padding: "44px 0" }}>
      <div style={{ order: flip ? 2 : 1 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ width: 34, height: 34, borderRadius: 9, background: accent, color: "#fff", display: "grid", placeItems: "center", fontWeight: 900, fontFamily: "var(--font-display)" }}>{index}</span>
          <span className="eyebrow" style={{ color: accent }}>{eyebrow}</span>
        </div>
        <h3 style={{ fontSize: "clamp(26px,3vw,40px)", marginTop: 16, lineHeight: 1.05 }}>{title}</h3>
        <p className="lead" style={{ marginTop: 14, fontSize: 18 }}>{body}</p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 9, marginTop: 18 }}>
          {bullets.map((b) => (
            <span key={b} className="pill"><Tick size={12} color={accent} />{b}</span>
          ))}
        </div>
      </div>
      <div style={{ order: flip ? 1 : 2, display: "grid", placeItems: "center" }}>{children}</div>
    </div>
  );
}

/* Feature mini-visuals */
function ProductMock() {
  return (
    <div className="fmock">
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        <div className="fmsg fmsg-out">snap 📷 → label</div>
      </div>
      <div className="fmock-verdict">
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 30, height: 30, borderRadius: "50%", background: "var(--halal)", color: "#fff", display: "grid", placeItems: "center", fontWeight: 900 }}>✓</span>
          <div>
            <div style={{ fontWeight: 900, color: "var(--halal)", letterSpacing: ".04em" }}>HALAL</div>
            <div style={{ fontSize: 12, color: "var(--ink-soft)" }}>Halal Certified · #CA-2241</div>
          </div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
        <div className="fchip" style={{ color: "var(--haram)", borderColor: "var(--haram)" }}>✕ Haram</div>
        <div className="fchip" style={{ color: "var(--unclear)", borderColor: "var(--unclear)" }}>! Unclear</div>
        <div className="fchip" style={{ color: "var(--halal)", borderColor: "var(--halal)" }}>✓ Halal</div>
      </div>
    </div>
  );
}
function RestoMock() {
  const rows = [["Karahi Boys", "Pakistani", "1.2 km"], ["Lazeez Shawarma", "Lebanese", "1.8 km"], ["Iqbal Foods", "Desi Grill", "2.0 km"]];
  return (
    <div className="fmock">
      <div style={{ fontWeight: 800, fontSize: 14, color: "var(--wa-deep)", marginBottom: 10 }}>🍽️ Halal near Mississauga</div>
      {rows.map((r, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 0", borderTop: i ? "1px solid var(--line-soft)" : "none" }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: "linear-gradient(135deg,#DDF6D6,#BFE9C5)", display: "grid", placeItems: "center", fontSize: 17 }}>🌯</div>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 800, fontSize: 14 }}>{r[0]}</div><div style={{ fontSize: 12, color: "var(--ink-soft)" }}>{r[1]}</div></div>
          <div style={{ textAlign: "right" }}><Stars n={5} /><div style={{ fontSize: 11, color: "var(--ink-faint)", fontWeight: 700 }}>{r[2]}</div></div>
        </div>
      ))}
    </div>
  );
}
function PriceMock() {
  const rows = [["No Frills", "$3.49", true], ["FreshCo", "$3.99", false], ["Walmart", "$4.27", false], ["Food Basics", "$4.49", false]];
  return (
    <div className="fmock">
      <div style={{ fontWeight: 800, fontSize: 14, color: "var(--wa-deep)", marginBottom: 6 }}>💰 Halal chicken thighs /lb</div>
      {rows.map((r, i) => (
        <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 12px", margin: "6px 0 0", borderRadius: 10, background: r[2] ? "var(--halal-bg)" : "var(--paper-2)" }}>
          <span style={{ fontWeight: 700, fontSize: 14 }}>{r[0]}</span>
          <span style={{ display: "flex", alignItems: "center", gap: 7 }}>
            {r[2] && <span style={{ fontSize: 9.5, fontWeight: 900, color: "#fff", background: "var(--halal)", borderRadius: 5, padding: "2px 6px" }}>SAVE 38¢</span>}
            <span style={{ fontWeight: 900, fontSize: 15, color: r[2] ? "var(--halal)" : "var(--ink)" }}>{r[1]}</span>
          </span>
        </div>
      ))}
    </div>
  );
}

function Features() {
  return (
    <section className="section" id="features" style={{ background: "var(--paper-2)", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 8px" }}>
          <span className="eyebrow" style={{ justifyContent: "center" }}>What Adam does</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>Three questions. One number.</h2>
          <p className="lead" style={{ marginTop: 16 }}>No ingredient analysis. No guessing. Just a verified answer in seconds.</p>
        </div>
        <FeatureRow index="1" accent="var(--halal)" eyebrow="Instant product checks"
          title="Send a name or snap the label."
          body="Adam checks against a trusted halal certification database and replies in seconds with a clear verdict — and the certification details behind it."
          bullets={["By name", "By photo", "Voice notes", "Cert details"]}>
          <ProductMock />
        </FeatureRow>
        <FeatureRow index="2" accent="var(--wa-deep)" flip eyebrow="Restaurant finder"
          title="Halal spots, in any Canadian city."
          body="Ask Adam about halal restaurants near you — by cuisine, neighbourhood, or name. Desi, shawarma, Chinese halal, biryani. Just ask."
          bullets={["By cuisine", "By distance", "Certified only", "Any city"]}>
          <RestoMock />
        </FeatureRow>
        <FeatureRow index="3" accent="var(--unclear)" eyebrow="Grocery price compare"
          title="The cheapest halal chicken this week."
          body="Adam checks live flyer and regular prices across Walmart, No Frills, Food Basics, Superstore and FreshCo — only showing verified halal products."
          bullets={["Live flyers", "5 chains", "Verified halal", "Save money"]}>
          <PriceMock />
        </FeatureRow>
      </div>
    </section>
  );
}

/* ---- NO APP ---- */
function NoApp() {
  return (
    <section className="section girih-bg reveal" style={{ color: "#fff", textAlign: "center" }}>
      <div className="wrap" style={{ maxWidth: 820 }}>
        <span className="eyebrow" style={{ color: "#9FE9C9", justifyContent: "center" }}>The best part</span>
        <h2 style={{ fontSize: "clamp(38px,6vw,74px)", marginTop: 18, color: "#fff" }}>No app. Just WhatsApp.</h2>
        <p style={{ fontSize: "clamp(18px,2.2vw,23px)", color: "rgba(255,255,255,.82)", marginTop: 20, lineHeight: 1.5 }}>
          Adam lives where you already are. No download, no account, no subscription.
          Type naturally, spell it wrong, send a voice note — Adam gets it. Just save the number and text.
        </p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap", marginTop: 30 }}>
          {["No download", "No account", "No subscription", "100% free"].map((x) => (
            <span key={x} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 700, color: "#fff", background: "rgba(255,255,255,.12)", border: "1px solid rgba(255,255,255,.22)", padding: "10px 18px", borderRadius: 999 }}>
              <Tick size={14} color="#7CF0B6" />{x}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.TrustBar = TrustBar;
window.Problem = Problem;
window.Features = Features;
window.NoApp = NoApp;
window.WAIcon = WAIcon;
window.PHONE = PHONE;
window.WA_LINK = WA_LINK;