// MyAirSpace — Marketing landing page. Composes MyAirSpace design-system primitives.
const { Button, Card, Badge, Seal } = window.MyAirSpace || {};
const Icon = window.MyAirSpaceIcon;

const PRICE = "£14.99";

function Logo({ inverse = false }) {
  const src = inverse ? "../../assets/logo-wordmark-inverse.svg" : "../../assets/logo-wordmark.svg";
  return <img src={src} alt="MyAirSpace" style={{ height: 30, display: "block" }} />;
}

const navLink = { fontFamily: "var(--font-ui)", fontSize: 15, fontWeight: 500, color: "var(--text-secondary)", cursor: "pointer", textDecoration: "none" };

// Tracks viewport width so layout can switch between mobile / tablet / desktop.
function useViewport() {
  const get = () => (typeof window === "undefined" ? 1180 : window.innerWidth);
  const [w, setW] = React.useState(get);
  React.useEffect(() => {
    const on = () => setW(get());
    window.addEventListener("resize", on);
    return () => window.removeEventListener("resize", on);
  }, []);
  return { w, isMobile: w < 760, isTablet: w >= 760 && w < 1024 };
}

const NAV_LINKS = [["How it works", "#how"], ["What it does", "#what"], ["Pricing", "#pricing"], ["FAQs", "#faq"]];

function Nav({ onStart }) {
  const { isMobile } = useViewport();
  const [open, setOpen] = React.useState(false);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 20, backdropFilter: "blur(8px)", background: "rgba(251,249,244,0.82)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "16px 22px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <Logo />
        {isMobile ? (
          <button onClick={() => setOpen((o) => !o)} aria-label="Menu" aria-expanded={open} style={{ background: "none", border: "none", cursor: "pointer", padding: 6, display: "flex" }}>
            <Icon name={open ? "x" : "menu"} size={26} color="var(--text-primary)" />
          </button>
        ) : (
          <nav style={{ display: "flex", alignItems: "center", gap: 28 }}>
            {NAV_LINKS.map(([l, h]) => <a key={h} href={h} style={navLink}>{l}</a>)}
            <Button variant="secondary" size="sm" onClick={() => { window.location.href = "../account/index.html"; }}>Sign in</Button>
            <Button variant="primary" size="sm" onClick={onStart}>Get started</Button>
          </nav>
        )}
      </div>
      {isMobile && open && (
        <nav style={{ display: "flex", flexDirection: "column", gap: 2, padding: "6px 22px 20px", borderTop: "1px solid var(--border-subtle)" }}>
          {NAV_LINKS.map(([l, h]) => <a key={h} href={h} onClick={() => setOpen(false)} style={{ ...navLink, padding: "12px 2px", fontSize: 16 }}>{l}</a>)}
          <div style={{ display: "flex", gap: 12, marginTop: 10 }}>
            <Button variant="secondary" size="sm" fullWidth onClick={() => { window.location.href = "../account/index.html"; }}>Sign in</Button>
            <Button variant="primary" size="sm" fullWidth onClick={onStart}>Get started</Button>
          </div>
        </nav>
      )}
    </header>
  );
}

function CertificatePreview() {
  return (
    <div style={{ transform: "rotate(1.4deg)" }}>
      <Card elevation="xl" padding="none" style={{ overflow: "hidden", border: "1px solid var(--border-cream)" }}>
        <div style={{ background: "var(--surface-card)", padding: "30px 30px 26px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Drone Recording</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, lineHeight: 1.1, color: "var(--text-primary)" }}>Privacy Certificate</div>
            </div>
            <Seal size={84} refText="MAS" />
          </div>
          <div style={{ height: 1, background: "var(--doc-rule)", margin: "4px 0 16px" }} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.55, color: "var(--text-secondary)", marginBottom: 16 }}>
            This certificate records that on <strong style={{ color: "var(--text-primary)" }}>18 June 2026</strong> at 14:32, <strong style={{ color: "var(--text-primary)" }}>E. Hargreaves</strong> declared that they do not consent to drones recording private residential spaces at:
          </p>
          <div style={{ fontFamily: "var(--font-data)", fontSize: 13, color: "var(--text-primary)", background: "var(--surface-cream)", borderRadius: "var(--radius-md)", padding: "12px 14px", marginBottom: 16, lineHeight: 1.5 }}>
            14 Rodwell Avenue<br />Weymouth · DT4 8QT
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-data)", fontSize: 11, color: "var(--text-muted)" }}>
            <span>ID · MAS-4F2K-8WMT</span><span>Verified record</span>
          </div>
        </div>
      </Card>
    </div>
  );
}

function Hero({ onStart }) {
  const { isMobile } = useViewport();
  return (
    <section style={{ overflow: "hidden" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: isMobile ? "44px 22px 48px" : "76px 28px 64px", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.05fr 0.95fr", gap: isMobile ? 40 : 56, alignItems: "center" }}>
        <div>
          <Badge tone="accent" style={{ marginBottom: 22 }}>For UK homes &amp; gardens</Badge>
          <h1 style={{ fontSize: "clamp(34px, 7vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.025em", marginBottom: 20 }}>Record your home’s drone&nbsp;privacy position</h1>
          <p style={{ fontSize: "clamp(17px, 2.4vw, 20px)", lineHeight: 1.55, color: "var(--text-secondary)", maxWidth: 520, marginBottom: 30 }}>
            Create a dated certificate stating that you do not consent to drones recording private spaces at your home.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginBottom: 22 }}>
            <Button variant="primary" size="lg" onClick={onStart} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Get started</Button>
            <Button variant="secondary" size="lg" iconLeft={<Icon name="file-text" size={18} color="var(--text-secondary)" />}>View example</Button>
          </div>
          <p style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-ui)", fontSize: 14, color: "var(--text-muted)" }}>
            <Icon name="clock" size={16} color="var(--text-muted)" />Takes around 2 minutes · PDF emailed instantly after payment
          </p>
        </div>
        <CertificatePreview />
      </div>
    </section>
  );
}

function Problem() {
  return (
    <section style={{ background: "var(--surface-cream)", borderTop: "1px solid var(--border-cream)", borderBottom: "1px solid var(--border-cream)" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", padding: "72px 28px", textAlign: "center" }}>
        <h2 style={{ fontSize: "clamp(28px, 5vw, 38px)", letterSpacing: "-0.02em", marginBottom: 18 }}>Concerned about drones near your home?</h2>
        <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--text-secondary)" }}>
          Drones are becoming more common, and many are fitted with cameras. While operators must follow UK flying and privacy rules, it can be hard for residents to clearly show their privacy preference. This certificate gives you a simple dated record that states your position.
        </p>
      </div>
    </section>
  );
}

const HOW = [
  { icon: "map-pin", title: "Enter your address", body: "Find your home with a quick postcode lookup, or type it in manually." },
  { icon: "shield-check", title: "Confirm declaration", body: "Tick the privacy declaration that records your no-consent position." },
  { icon: "credit-card", title: "Pay securely", body: "A one-off fee. Card, Apple Pay and Google Pay accepted." },
  { icon: "mail", title: "Receive by email", body: "Your PDF certificate is generated and emailed instantly." },
  { icon: "download", title: "Download anytime", body: "Access, re-download and print it from your account whenever." },
];

function HowItWorks() {
  return (
    <section id="how" style={{ maxWidth: 1180, margin: "0 auto", padding: "84px 28px" }}>
      <div style={{ textAlign: "center", marginBottom: 48 }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>How it works</div>
        <h2 style={{ fontSize: "clamp(28px, 5vw, 40px)", letterSpacing: "-0.02em" }}>Five calm steps</h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(168px, 1fr))", gap: 18 }}>
        {HOW.map((s, i) => (
          <Card key={i} elevation="sm" padding="md" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--accent-soft)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name={s.icon} size={22} color="var(--accent-hover)" />
            </div>
            <div style={{ fontFamily: "var(--font-data)", fontSize: 12, color: "var(--text-faint)" }}>0{i + 1}</div>
            <div style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 17, color: "var(--text-primary)" }}>{s.title}</div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.5, color: "var(--text-muted)" }}>{s.body}</p>
          </Card>
        ))}
      </div>
    </section>
  );
}

const DOES = ["Records your no-consent position", "Shows the date and time it was created", "Identifies the property address", "Provides a downloadable PDF", "Gives you a clear document to keep or print"];
const DOESNT = ["Create a legal no-fly zone", "Stop lawful drone flights", "Replace legal advice", "Come from the CAA, police, ICO or government", "Guarantee action against an operator"];
const listStyle = { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 14 };
const liStyle = { display: "flex", gap: 10, alignItems: "flex-start", fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.45, color: "var(--text-primary)" };

function WhatItDoes() {
  return (
    <section id="what" style={{ background: "var(--surface-sunken)", borderTop: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", padding: "84px 28px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 28 }}>
        <Card padding="lg" elevation="sm">
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
            <Icon name="circle-check-big" size={22} color="var(--success)" /><h3 style={{ fontSize: 22 }}>What it does</h3>
          </div>
          <ul style={listStyle}>{DOES.map((t, i) => <li key={i} style={liStyle}><Icon name="check" size={18} color="var(--success)" /><span>{t}</span></li>)}</ul>
        </Card>
        <Card padding="lg" elevation="sm">
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
            <Icon name="info" size={22} color="var(--text-muted)" /><h3 style={{ fontSize: 22 }}>What it does not do</h3>
          </div>
          <ul style={listStyle}>{DOESNT.map((t, i) => <li key={i} style={liStyle}><Icon name="minus" size={18} color="var(--text-faint)" /><span style={{ color: "var(--text-secondary)" }}>{t}</span></li>)}</ul>
        </Card>
      </div>
    </section>
  );
}

function Pricing({ onStart }) {
  return (
    <section id="pricing" style={{ maxWidth: 1180, margin: "0 auto", padding: "84px 28px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 48, alignItems: "center" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Simple pricing</div>
          <h2 style={{ fontSize: "clamp(28px, 5vw, 40px)", letterSpacing: "-0.02em", marginBottom: 16 }}>One certificate, one fee</h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--text-secondary)", marginBottom: 22 }}>No subscription. Pay once, keep your certificate, and download it whenever you need it from your account.</p>
          <ul style={listStyle}>
            <li style={liStyle}><Icon name="check" size={18} color="var(--success)" /><span>PDF emailed instantly</span></li>
            <li style={liStyle}><Icon name="check" size={18} color="var(--success)" /><span>Unique verifiable certificate ID</span></li>
            <li style={liStyle}><Icon name="check" size={18} color="var(--success)" /><span>Discounted certificates for extra properties</span></li>
          </ul>
        </div>
        <Card tone="ink" elevation="lg" padding="lg" style={{ textAlign: "center" }}>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: 14, color: "var(--ink-300)", letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 10 }}>Single certificate</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(48px, 9vw, 64px)", fontWeight: 600, color: "#fff", lineHeight: 1, marginBottom: 6 }}>{PRICE}</div>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: 15, color: "var(--ink-300)", marginBottom: 26 }}>one-off · covers one property</div>
          <Button variant="primary" size="lg" fullWidth onClick={onStart}>Create your certificate</Button>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, marginTop: 16, color: "var(--ink-300)", fontFamily: "var(--font-ui)", fontSize: 13 }}>
            <Icon name="lock" size={14} color="var(--ink-300)" />Secure payment by Stripe
          </div>
        </Card>
      </div>
    </section>
  );
}

const FAQS = [
  ["Can this stop drones flying over my house?", "No. The certificate does not create a no-fly zone. It records that you do not consent to drone recording of private residential spaces."],
  ["Is this legally binding?", "No. It is a dated privacy record, not a legal document or court order."],
  ["Can I print the certificate?", "Yes. You can download the PDF and print it as many times as you like."],
  ["Will drone operators know about it?", "Only if you show, display or share it. The certificate is mainly a record for your own use."],
  ["Can I use it if I rent my home?", "Yes, if you are a resident or occupier and the declaration reflects your own privacy preference."],
  ["Can I get certificates for more than one property?", "Yes. Your account supports multiple certificates, and extra properties are discounted."],
];

function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ background: "var(--surface-cream)", borderTop: "1px solid var(--border-cream)" }}>
      <div style={{ maxWidth: 760, margin: "0 auto", padding: "84px 28px" }}>
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Questions</div>
          <h2 style={{ fontSize: "clamp(28px, 5vw, 40px)", letterSpacing: "-0.02em" }}>Frequently asked</h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {FAQS.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ background: "var(--surface-card)", border: "1px solid var(--border-cream)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "18px 22px", background: "none", border: "none", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-heading)", fontSize: 18, fontWeight: 600, color: "var(--text-primary)" }}>
                  {q}<Icon name={isOpen ? "minus" : "plus"} size={20} color="var(--accent-hover)" />
                </button>
                {isOpen && <div style={{ padding: "0 22px 20px", fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6, color: "var(--text-secondary)" }}>{a}</div>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCta({ onStart }) {
  return (
    <section style={{ background: "var(--surface-ink)" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", padding: "84px 28px", textAlign: "center" }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 24 }}><Seal size={96} refText="UK" /></div>
        <h2 style={{ fontSize: "clamp(30px, 6vw, 44px)", letterSpacing: "-0.025em", color: "#fff", marginBottom: 16 }}>Put your privacy position on record</h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink-300)", maxWidth: 540, margin: "0 auto 28px" }}>A clear, dated record for your home — created in about two minutes.</p>
        <Button variant="primary" size="lg" onClick={onStart} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Get started · {PRICE}</Button>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ["Product", ["How it works", "What it does", "Pricing", "Example certificate"]],
    ["Support", ["FAQs", "Contact us", "Verify a certificate"]],
    ["Legal", ["Terms & conditions", "Privacy policy", "Cookie policy", "Disclaimer"]],
  ];
  return (
    <footer style={{ background: "var(--surface-ink)", borderTop: "1px solid var(--ink-700)" }}>
      <div style={{ maxWidth: 900, margin: "0 auto", padding: "10px 28px 28px" }}>
        <p style={{ fontFamily: "var(--font-ui)", fontSize: 13, lineHeight: 1.6, color: "var(--ink-400)", textAlign: "center", paddingBottom: 28, borderBottom: "1px solid var(--ink-700)" }}>
          This certificate is a dated record of the resident’s stated privacy preference. It is not a government document, CAA authorisation, legal notice, court order or no-fly zone registration. Drone operators remain responsible for complying with all applicable UK aviation, privacy and data protection laws.
        </p>
      </div>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "28px 28px 48px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 32 }}>
        <div>
          <Logo inverse />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6, color: "var(--ink-400)", marginTop: 14, maxWidth: 240 }}>A simple way for UK residents to record their drone privacy position.</p>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: 13, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-300)", marginBottom: 14 }}>{h}</div>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {items.map((it) => <li key={it}><a href="#" style={{ fontFamily: "var(--font-ui)", fontSize: 14, color: "var(--ink-400)", textDecoration: "none" }}>{it}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: "1px solid var(--ink-700)", padding: "20px 28px", textAlign: "center", fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--ink-500)" }}>© 2026 MyAirSpace. Not affiliated with any UK government body.</div>
    </footer>
  );
}

function LandingPage({ onStart = () => {} }) {
  return (
    <div style={{ background: "var(--surface-page)" }}>
      <Nav onStart={onStart} />
      <Hero onStart={onStart} />
      <Problem />
      <HowItWorks />
      <WhatItDoes />
      <Pricing onStart={onStart} />
      <Faq />
      <FinalCta onStart={onStart} />
      <Footer />
    </div>
  );
}
window.LandingPage = LandingPage;
