/* global React, ReactDOM, Icon, SAMPLES, LIBRARY */
const { useState, useRef, useEffect } = React;

// ─── Inline SVG icons (heroicons-style, stroke) ───────────────────────
const SvgIcon = ({ d, size = 22, stroke = 2 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round">
    {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
  </svg>
);
const ICONS = {
  camera: "M3 9a2 2 0 0 1 2-2h2l2-3h6l2 3h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
  sparkles: "M12 3v4 M12 17v4 M3 12h4 M17 12h4 M5.6 5.6l2.8 2.8 M15.6 15.6l2.8 2.8 M18.4 5.6l-2.8 2.8 M8.4 15.6l-2.8 2.8",
  share: "M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7 M16 6l-4-4-4 4 M12 2v13",
  shield: "M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3Z M9 12l2 2 4-4",
  bolt: "M13 2 3 14h7l-1 8 10-12h-7l1-8Z",
  heart: "M12 21s-8-4.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.5-8 11-8 11h-2Z",
  print: "M6 9V3h12v6 M6 17H4a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-2 M6 14h12v7H6z",
  stack: "M3 7l9-4 9 4-9 4-9-4Z M3 12l9 4 9-4 M3 17l9 4 9-4",
  check: "M5 12l5 5 9-11",
  plus: "M12 5v14 M5 12h14",
  menu: "M3 12h18 M3 6h18 M3 18h18",
  arrow: "M5 12h14 M13 5l7 7-7 7",
  download: "M12 3v12 M7 10l5 5 5-5 M4 21h16",
  apple: "M19 17.5c-.8 1.9-1.8 3.7-3.4 3.7-1.4 0-1.8-.8-3.4-.8-1.5 0-2 .8-3.3.8-1.6 0-2.8-1.9-3.7-3.8-1.8-3.7-1.8-7.5 0-9.6 1-1.3 2.4-2 3.7-2.1 1.3-.1 2.6.9 3.3.9.7 0 2.2-1.1 3.7-.9.6.1 2.4.3 3.5 2-3 1.8-2.5 6.3-.4 7.8Z M14.8 6.5c.7-.8 1.1-2 1-3.2-1.1.1-2.3.8-3 1.6-.6.7-1.1 1.8-.9 3 1.2.1 2.3-.6 2.9-1.4Z",
  play: "M7 4v16l13-8L7 4Z",
  star: "M12 2 15 9l8 .7-6 5.2 1.8 7.8L12 18.8 5.2 22.7 7 14.9 1 9.7 9 9Z",
};

// ─── Buttons ──────────────────────────────────────────────────────────
const PrimaryBtn = ({ children, size = "lg", as = "button", className = "", ...p }) => {
  const Cmp = as;
  return <Cmp className={`btn btn-primary btn-${size} ${className}`} {...p}>{children}</Cmp>;
};
const GhostBtn = ({ children, size = "lg", as = "button", className = "", ...p }) => {
  const Cmp = as;
  return <Cmp className={`btn btn-ghost btn-${size} ${className}`} {...p}>{children}</Cmp>;
};

// ─── Compare slider ───────────────────────────────────────────────────
function Compare({ before, after, initial = 52 }) {
  const [pos, setPos] = useState(initial);
  const ref = useRef(null);
  const dragging = useRef(false);

  const move = (clientX) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const p = Math.min(100, Math.max(0, ((clientX - r.left) / r.width) * 100));
    setPos(p);
  };
  const onDown = (e) => {
    dragging.current = true;
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    move(x);
  };
  useEffect(() => {
    const onMove = (e) => {
      if (!dragging.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      move(x);
    };
    const onUp = () => { dragging.current = false; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchmove', onMove, { passive: true });
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  return (
    <div
      ref={ref}
      className="lp-compare"
      onMouseDown={onDown}
      onTouchStart={onDown}
    >
      <img src={after} alt="restored" />
      <div className="cmp-before-wrap" style={{ width: `${pos}%` }}>
        <img src={before} alt="original"
             style={{ width: `${100 / (pos/100)}%`, maxWidth: 'none' }} />
      </div>
      <span className="cmp-label before">Before</span>
      <span className="cmp-label after">After</span>
      <div className="cmp-handle" style={{ left: `${pos}%` }} />
    </div>
  );
}

// Small variant (gallery cards)
function CompareSmall({ before, after, initial = 50 }) {
  const [pos, setPos] = useState(initial);
  const ref = useRef(null);
  const dragging = useRef(false);
  const move = (clientX) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const p = Math.min(100, Math.max(0, ((clientX - r.left) / r.width) * 100));
    setPos(p);
  };
  const onDown = (e) => {
    dragging.current = true;
    const x = e.touches ? e.touches[0].clientX : e.clientX;
    move(x);
  };
  useEffect(() => {
    const onMove = (e) => {
      if (!dragging.current) return;
      const x = e.touches ? e.touches[0].clientX : e.clientX;
      move(x);
    };
    const onUp = () => { dragging.current = false; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
  }, []);
  return (
    <div ref={ref} className="gc-compare" onMouseDown={onDown} onTouchStart={onDown}>
      <img src={after} alt="" />
      <div className="cmp-before-wrap" style={{ width: `${pos}%` }}>
        <img src={before} alt="" style={{ width: `${100 / (pos/100)}%`, maxWidth: 'none' }} />
      </div>
      <div className="cmp-handle" style={{ left: `${pos}%` }} />
    </div>
  );
}

// ─── Sections ─────────────────────────────────────────────────────────
// R letter-mark — worn photo-corner motif
function RMark({ size = 30, variant = 'filled' }) {
  // Filled: orange gradient bg, cream R. Outline: sepia R on transparent.
  const bg = variant === 'filled'
    ? 'linear-gradient(135deg, #FF933A, #FF4A00)'
    : 'transparent';
  const strokeColor = variant === 'filled' ? '#FBF6EC' : '#2A1F15';
  return (
    <span className="rmark" style={{
      width: size, height: size,
      borderRadius: size * 0.27,
      background: bg,
      display: 'inline-grid', placeItems: 'center',
      flexShrink: 0,
      boxShadow: variant === 'filled' ? '0 4px 10px -4px rgba(255,74,0,.5)' : 'none',
    }}>
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 32 32" fill="none">
        {/* Stylised R — bowl with a torn top-right corner, kicking leg */}
        <path
          d="M7 4 L7 28"
          stroke={strokeColor} strokeWidth="4" strokeLinecap="square"
        />
        <path
          d="M7 4 L19 4 L24 5.5 L26 9 L26 13 L24 16 L19 17 L7 17"
          stroke={strokeColor} strokeWidth="4" strokeLinejoin="miter" strokeLinecap="butt"
          fill="none"
        />
        {/* kicking leg / checkmark swoop */}
        <path
          d="M16 17 L28 30"
          stroke={strokeColor} strokeWidth="4" strokeLinecap="round"
        />
        {/* torn corner notch */}
        <path
          d="M22 4 L26 4 L26 8 Z"
          fill={variant === 'filled' ? '#FF4A00' : '#F6EFE4'}
          stroke={strokeColor} strokeWidth="1.2" strokeLinejoin="round"
        />
      </svg>
    </span>
  );
}

function BrandLogo({ size = 30 }) {
  return (
    <>
      <RMark size={size} />
      <span className="brand-wordmark">
        <span className="bw-line-1">Restore</span>
        <span className="bw-line-2">Old Photos</span>
      </span>
    </>
  );
}

function Nav() {
  return (
    <nav className="lp-nav">
      <div className="lp-nav-inner">
        <a href="#" className="lp-logo">
          <BrandLogo />
        </a>
        <ul className="lp-nav-links">
          <li><a href="#how">How it works</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#gallery">Gallery</a></li>
          <li><a href="#pricing">Pricing</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
        <div className="lp-nav-cta">
          <a className="signin-link" href="desktop.html">Sign in</a>
          <PrimaryBtn as="a" href="desktop.html" size="sm">Get started — it's free</PrimaryBtn>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="lp-hero lp-container">
      <div className="lp-hero-grid">
        <div className="lp-hero-copy">
          <span className="lp-eyebrow">Restore old photos, fast</span>
          <h1 className="lp-h1">
            Bring the people you love back into focus.
          </h1>
          <p className="lp-lede">
            <strong style={{fontWeight: 700, color: 'var(--sepia-ink)'}}>Restore Old Photos</strong> repairs scratches, tears, fading, and water damage on your family photographs — in about fifteen seconds. Snap a picture of the
            original with your phone, and we'll hand you back a cleaned-up print
            you can share with the whole family.
          </p>
          <div className="lp-hero-ctas">
            <PrimaryBtn as="a" href="desktop.html">
              <SvgIcon d={ICONS.camera} size={18} /> Restore your first photo
            </PrimaryBtn>
            <GhostBtn as="a" href="#get-app">
              <SvgIcon d={ICONS.apple} size={16} /> Get the app
            </GhostBtn>
          </div>
          <div className="lp-hero-trust">
            <span className="tr-stat">
              <SvgIcon d={ICONS.star} size={14} />
              <b>4.9</b> on the App Store
            </span>
            <span className="tr-stat">
              <SvgIcon d={ICONS.heart} size={14} />
              <b>180,000+</b> photos restored
            </span>
            <span className="tr-stat">
              <SvgIcon d={ICONS.shield} size={14} />
              Private by default
            </span>
          </div>
        </div>

        <div className="lp-hero-visual">
          <Compare before={SAMPLES.bw.before} after={SAMPLES.bw.after} />
          <div className="lp-hero-review">
            <div className="rev-av">MC</div>
            <div>
              <div className="rev-stars">★★★★★</div>
              <p className="rev-quote">
                "I cried. That's my grandmother, clear as day."
              </p>
              <div className="rev-name">Marjorie C., Ohio</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Press() {
  return (
    <section className="lp-press">
      <div className="lp-container">
        <p className="lp-press-label">As seen in</p>
        <div className="lp-press-logos">
          <span className="press-logo serif">The New York Times</span>
          <span className="press-logo">WIRED</span>
          <span className="press-logo serif">The Atlantic</span>
          <span className="press-logo">Fast Company</span>
          <span className="press-logo">TechCrunch</span>
          <span className="press-logo serif">AARP</span>
        </div>
      </div>
    </section>
  );
}

function How() {
  const steps = [
    {
      n: 1,
      title: "Snap the original",
      body: "Lay the photo flat, open the app, and point your phone at it. The app auto-detects the edges and straightens the crop for you — no scanner needed.",
      visual: (
        <div style={{
          background: 'linear-gradient(135deg, #EFE4D1 0%, #D9CBB2 100%)',
          width: '100%', height: '100%',
          display: 'grid', placeItems: 'center',
          color: 'var(--sepia-ink)',
        }}>
          <SvgIcon d={ICONS.camera} size={56} stroke={1.5} />
        </div>
      ),
    },
    {
      n: 2,
      title: "AI does the heavy lifting",
      body: "Our restoration model removes scratches, fills in tears, recovers faded colour, and sharpens faces — all in about fifteen seconds. You can fine-tune the result with simple sliders.",
      visual: (
        <Compare before={SAMPLES.color70s.before} after={SAMPLES.color70s.after} initial={40} />
      ),
    },
    {
      n: 3,
      title: "Share or print at home",
      body: "Save to your camera roll, text it to family, or order an archival print. Everyone on the group chat gets the version that looks the way you remember.",
      visual: (
        <div style={{
          background: 'linear-gradient(135deg, #3a2817, #1c130b)',
          width: '100%', height: '100%',
          display: 'grid', placeItems: 'center',
          color: '#FF933A',
        }}>
          <SvgIcon d={ICONS.share} size={56} stroke={1.5} />
        </div>
      ),
    },
  ];
  return (
    <section className="lp-section lp-how" id="how">
      <div className="lp-container">
        <div className="lp-how-header">
          <span className="lp-eyebrow">How it works</span>
          <h2 className="lp-h2">Three steps. No scanner. No fuss.</h2>
          <p className="lp-lede">
            Built for people who love their photos more than they love their
            computers. If you can take a picture, you can use Restore Old Photos.
          </p>
        </div>
        <div className="lp-how-steps">
          {steps.map(s => (
            <div key={s.n} className="lp-how-step">
              <div className="step-num">{s.n}</div>
              <div className="step-visual">{s.visual}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  const feats = [
    { ic: ICONS.sparkles, t: "True-to-life restoration",
      b: "We repair, we don't reinvent. Faces keep their character — freckles, dimples, the way your dad's ear sticks out — none of that AI-plastic look." },
    { ic: ICONS.bolt, t: "Ready in fifteen seconds",
      b: "Restorations that used to take a studio a week now happen on your phone while the kettle boils." },
    { ic: ICONS.shield, t: "Private and yours",
      b: "Your photos are processed, delivered, and deleted. We never sell them, we never train on them, and we never show them to anyone else.", dark: true },
    { ic: ICONS.heart, t: "Built for the whole archive",
      b: "Unlimited restorations on paid plans, your library synced between phone and desktop, and a simple export if you ever want to take everything with you." },
    { ic: ICONS.print, t: "Museum-quality prints",
      b: "Order archival 5×7s, 8×10s, or custom framed prints. Shipped in recyclable packaging, usually within four days." },
    { ic: ICONS.stack, t: "Batch scanning",
      b: "Got a shoebox? Point the camera at a stack and we'll split, straighten, and restore each one automatically." },
  ];
  return (
    <section className="lp-section lp-features" id="features">
      <div className="lp-container">
        <div className="lp-how-header">
          <span className="lp-eyebrow">What you get</span>
          <h2 className="lp-h2">Careful tools, built for something that matters.</h2>
          <p className="lp-lede">
            Every feature in Restore Old Photos exists because someone trusted us with a
            photo of the person they miss most. We take that seriously.
          </p>
        </div>
        <div className="lp-feature-grid">
          {feats.map((f, i) => (
            <div key={i} className={`lp-feature ${f.dark ? 'dark' : ''}`}>
              <div className="feat-ic"><SvgIcon d={f.ic} size={24} stroke={1.8} /></div>
              <h3>{f.t}</h3>
              <p>{f.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  const cards = [
    { title: "Grandparents' wedding, 1951", sub: "B&W • Severe fading, tear across top" },
    { title: "Dad at Niagara, 1974", sub: "Colour • Orange shift, dust spots" },
    { title: "Aunt Rose, age 8", sub: "B&W • Water damage, missing corner" },
  ];
  const pairs = [
    { before: SAMPLES.bw.before, after: SAMPLES.bw.after },
    { before: SAMPLES.color70s.before, after: SAMPLES.color70s.after },
    { before: SAMPLES.bw.before, after: SAMPLES.bw.after },
  ];
  return (
    <section className="lp-section" id="gallery">
      <div className="lp-container">
        <div className="lp-gallery-header">
          <span className="lp-eyebrow">Real restorations</span>
          <h2 className="lp-h2">Drag the slider. See the difference.</h2>
        </div>
        <div className="lp-gallery-grid">
          {cards.map((c, i) => (
            <div key={i} className="lp-gallery-card">
              <CompareSmall before={pairs[i].before} after={pairs[i].after} initial={45 + i * 5} />
              <div className="gc-meta">
                <div className="gc-title">{c.title}</div>
                <div className="gc-sub">{c.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const t = [
    { q: "My mother passed last March. We had one picture of her and Dad together from their honeymoon, and it was half-gone. Restore Old Photos gave it back to me. I printed it at Walgreens and it's on my mantel now.",
      name: "Patricia L.", meta: "Asheville, NC • Restored 23 photos" },
    { q: "I was ready to pay a local studio $90 a print. Did my whole grandmother's album in an afternoon for $9. My sister thought I'd hired a professional.",
      name: "David M.", meta: "Portland, OR • Restored 412 photos" },
    { q: "I'm 78 and not what you'd call technical. The big buttons and the plain English made it feel like the phone was built for me for once. Whoever designed Restore Old Photos — thank you.",
      name: "Edward T.", meta: "Tulsa, OK • Restored 47 photos" },
    { q: "We used Restore Old Photos to build a slideshow for my dad's 90th. Watching him see his mother's face clearly for the first time in fifty years — worth every penny.",
      name: "Yvette R.", meta: "Montréal, QC • Restored 88 photos" },
  ];
  return (
    <section className="lp-section lp-testimonials">
      <div className="lp-container">
        <div className="lp-how-header">
          <span className="lp-eyebrow">Letters we've kept</span>
          <h2 className="lp-h2">"I cried. Then I called my sister."</h2>
          <p className="lp-lede">
            Stories from the people who've trusted us with their family albums.
          </p>
        </div>
        <div className="lp-testi-grid">
          {t.map((x, i) => (
            <div key={i} className="lp-testi">
              <div className="testi-stars">★★★★★</div>
              <p className="testi-quote">"{x.q}"</p>
              <div className="testi-foot">
                <div className="testi-av">{x.name.split(' ').map(w => w[0]).join('')}</div>
                <div>
                  <div className="testi-name">{x.name}</div>
                  <div className="testi-meta">{x.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const [yearly, setYearly] = useState(true);
  const tiers = [
    {
      name: "Free",
      desc: "Perfect for trying it out.",
      priceLabel: "$0", per: "forever", eq: "No credit card needed",
      features: [
        "3 restorations to try",
        "Watermarked preview downloads",
        "iPhone, Android & web",
      ],
      cta: "Start free",
      ctaHref: "index.html",
    },
    {
      name: "Family",
      desc: "For the family archivist.",
      priceLabel: yearly ? "$49" : "$9.99",
      per: yearly ? "/ year" : "/ month",
      eq: yearly ? "Just $4.08/mo — save 58%" : "Billed monthly",
      features: [
        "Unlimited* restorations",
        "High-resolution (4× upscale) downloads",
        "No watermarks",
        "Cloud library, synced everywhere",
        "Living Memory videos from $2.99 each",
      ],
      featured: true,
      cta: yearly ? "Start 7-day free trial" : "Start free trial",
      ctaHref: "index.html",
    },
    {
      name: "Pro",
      desc: "Everything, including videos.",
      priceLabel: yearly ? "$99" : "$19.99",
      per: yearly ? "/ year" : "/ month",
      eq: yearly ? "Just $8.25/mo — save 58%" : "Billed monthly",
      features: [
        "Everything in Family",
        "10 Living Memory videos per month",
        "Priority processing queue",
        "Early access to new features",
        "Priority email support",
      ],
      footnote: "*Unlimited use is subject to our fair-use policy.",
      badge: "Best value",
      cta: yearly ? "Start 7-day free trial" : "Try Pro free",
      ctaHref: "index.html",
    },
  ];
  return (
    <section className="lp-section lp-pricing" id="pricing">
      <div className="lp-container">
        <div className="lp-pricing-header">
          <span className="lp-eyebrow">Pricing</span>
          <h2 className="lp-h2">Simple, honest pricing.</h2>
          <p className="lp-lede" style={{ margin: '16px auto 0' }}>
            Start free. Upgrade when you're ready — cancel anytime, one click.
          </p>
          <div className="lp-billing-toggle">
            <button className={!yearly ? 'active' : ''} onClick={() => setYearly(false)}>Monthly</button>
            <button className={yearly ? 'active' : ''} onClick={() => setYearly(true)}>
              Yearly <span className="save-pill">Save 58%</span>
            </button>
          </div>
        </div>
        <div className="lp-pricing-grid">
          {tiers.map((t, i) => (
            <div key={i} className={`lp-price-card ${t.featured ? 'featured' : ''}`}>
              {t.badge && <div className="pc-badge">{t.badge}</div>}
              {t.featured && !t.badge && <div className="pc-badge">Most loved</div>}
              <h3>{t.name}</h3>
              <p className="pc-desc">{t.desc}</p>
              <div className="pc-price">
                <span className="pc-amt">{t.priceLabel}</span>
                <span className="pc-per">{t.per}</span>
              </div>
              <div className="pc-eq">{t.eq}</div>
              <ul>
                {t.features.map((f, j) => (
                  <li key={j}>
                    <SvgIcon d={ICONS.check} size={18} stroke={2.5} />
                    {f}
                  </li>
                ))}
              </ul>
              {t.featured
                ? <PrimaryBtn as="a" href={t.ctaHref} style={{ width: '100%', justifyContent: 'center' }}>{t.cta}</PrimaryBtn>
                : <GhostBtn as="a" href={t.ctaHref} style={{ width: '100%', justifyContent: 'center' }}>{t.cta}</GhostBtn>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "What does 'unlimited' actually mean?",
      a: "Fair-use unlimited: virtually everyone restores between 5 and 80 photos a month, and our paid plans cover that generously. To protect the service from automated scraping and commercial resale, we apply a soft fair-use threshold of 100 restorations per calendar month per account — past that, processing is queued at standard (non-priority) speed. Less than 1% of accounts ever hit it. If you're a genealogist or archivist with a bigger collection, email us and we'll sort you out." },
    { q: "Can I retry if I don't like the result?",
      a: "Yes. Every restoration includes one free re-run with your own custom instructions — for example, 'keep the grain, don't smooth the skin so much' or 'warmer tones, less orange.' If that still isn't right, you can start a fresh restoration (which counts as a new one)." },
    { q: "How damaged can a photo be before you can't fix it?",
      a: "We've had good luck with photos that are torn in half, water-stained, heavily creased, severely faded, or missing small chunks. The one thing we can't invent is detail that was never captured in the original — if a face is blurred because the photographer shook the camera in 1938, it will still be a little soft. When in doubt, just try it; the first few restorations are free." },
    { q: "Do you train your AI on my photos?",
      a: "No. Photos are processed on secure servers, delivered to your phone, and deleted within 24 hours. We don't keep copies, we don't sell them, we don't use them to improve the model. If you're on the Archivist plan, your vault is end-to-end encrypted and we literally can't see inside it." },
    { q: "What about really old photos — tintypes, daguerreotypes, glass plates?",
      a: "Our model handles most pre-1900 photographs, including tintypes, cabinet cards, cyanotypes, and glass-plate negatives. For the most fragile examples, shoot them flat against a dark background in soft daylight and dial the restoration strength down to 40–60% to preserve the texture of the original emulsion." },
    { q: "Can I order prints?",
      a: "Yes. We work with a family-run print lab in Vermont that's been doing archival printing since 1972. Prints are made on Hahnemühle paper, ship in rigid packaging, and usually arrive within four business days in the US. Pro subscribers get four prints a year included." },
    { q: "Will the restored version look fake?",
      a: "It shouldn't. Our model is tuned to repair, not reimagine — we put a lot of effort into preserving the texture, grain, and lighting of the original era. You can also dial the restoration strength down with a slider if you prefer a softer, more photograph-like finish." },
    { q: "Does it work on my phone?",
      a: "Yes — iOS 14 and up, Android 10 and up. You can also use the web app on a desktop if you already have photos scanned. No download required for the web version." },
    { q: "Can I cancel anytime?",
      a: "Yes, and the cancel button is on the first page of your account settings (not buried four menus deep). Cancellations take effect at the end of the current billing period; anything you've already restored is yours to keep forever." },
  ];
  return (
    <section className="lp-section lp-faq" id="faq">
      <div className="lp-container">
        <div className="lp-how-header" style={{ textAlign: 'center' }}>
          <span className="lp-eyebrow">Frequently asked</span>
          <h2 className="lp-h2">The questions we hear most.</h2>
        </div>
        <div className="lp-faq-grid">
          {items.map((it, i) => (
            <details key={i} className="lp-faq-item" open={i === 0}>
              <summary>
                {it.q}
                <span className="chev"><SvgIcon d={ICONS.plus} size={16} stroke={2.4} /></span>
              </summary>
              <div className="faq-body">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaBand() {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSent(true);
  };

  return (
    <section className="lp-section lp-cta-band" id="get-app">
      <div className="lp-container lp-getapp-grid">
        <div className="lp-getapp-copy">
          <span className="lp-eyebrow" style={{ color: '#FF933A' }}>Get the app</span>
          <h2 className="lp-h2">The photos aren't getting any younger.</h2>
          <p>
            Restore Old Photos lives on your phone — the camera is already
            there, and so is your family group chat. Pick one out of the album
            tonight; fifteen seconds from now it'll look the way you remember.
          </p>

          <div className="lp-cta-actions">
            <a className="app-badge" href="https://apps.apple.com/app/restore-old-photos" target="_blank" rel="noopener">
              <SvgIcon d={ICONS.apple} size={26} stroke={0} />
              <span>
                <span className="ab-sub">Download on the</span>
                <span className="ab-name">App Store</span>
              </span>
            </a>
            <a className="app-badge" href="https://play.google.com/store/apps/details?id=app.restoreoldphoto" target="_blank" rel="noopener">
              <SvgIcon d={ICONS.play} size={26} stroke={0} />
              <span>
                <span className="ab-sub">Get it on</span>
                <span className="ab-name">Google Play</span>
              </span>
            </a>
            <a className="app-badge light" href="desktop.html">
              <SvgIcon d={ICONS.arrow} size={22} stroke={2} />
              <span>
                <span className="ab-sub">Or try on</span>
                <span className="ab-name">The web app</span>
              </span>
            </a>
          </div>

          <div className="lp-getapp-email">
            <div className="ge-label">On a desktop? We'll email you the links.</div>
            {!sent ? (
              <form className="ge-form" onSubmit={submit}>
                <input
                  type="email"
                  placeholder="you@example.com"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  aria-label="Email address"
                />
                <button type="submit" disabled={!email.includes('@')}>
                  Send me the app
                </button>
              </form>
            ) : (
              <div className="ge-sent">
                <SvgIcon d={ICONS.check} size={18} stroke={2.5} />
                Sent! Check <b>{email}</b> for the App Store and Google Play links.
              </div>
            )}
            <div className="ge-fine">
              We'll send one email with both download links. No newsletter.
            </div>
          </div>
        </div>

        <div className="lp-getapp-qr">
          <div className="qr-phone">
            <div className="qr-phone-screen">
              <div className="qr-phone-inner">
                <div className="qr-phone-glow" />
                <RMark size={46} />
                <div className="qr-phone-caption">Scan to download</div>
                <div className="qr-code">
                  {/* Decorative 21×21 QR-style grid — not a real code */}
                  {Array.from({ length: 441 }).map((_, i) => {
                    const row = Math.floor(i / 21), col = i % 21;
                    // position finder squares (top-left, top-right, bottom-left)
                    const isFinder = (r, c) =>
                      (r < 7 && c < 7) ||
                      (r < 7 && c > 13) ||
                      (r > 13 && c < 7);
                    const finderOn = (r, c) => {
                      const cond = isFinder(r, c);
                      if (!cond) return false;
                      // outer ring
                      const rr = r < 7 ? r : r - 14;
                      const cc = c < 7 ? c : c - 14;
                      const ar = Math.abs(rr - 3);
                      const ac = Math.abs(cc - 3);
                      if (Math.max(ar, ac) === 3) return true;
                      if (Math.max(ar, ac) <= 1) return true;
                      return false;
                    };
                    if (isFinder(row, col)) {
                      return <span key={i} className={finderOn(row, col) ? 'qr-on' : 'qr-off'} />;
                    }
                    // pseudo-random data pattern (deterministic)
                    const on = ((row * 7 + col * 13 + (row ^ col) * 3) % 5) < 2;
                    return <span key={i} className={on ? 'qr-on' : 'qr-off'} />;
                  })}
                </div>
                <div className="qr-phone-store">
                  <span>App Store</span>
                  <span className="dot">•</span>
                  <span>Google Play</span>
                </div>
              </div>
            </div>
          </div>
          <div className="qr-caption">
            Point your phone's camera at the code.
            <br />
            We'll detect iPhone or Android automatically.
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="lp-footer">
      <div className="lp-container">
        <div className="lp-footer-grid">
          <div className="lp-footer-brand">
            <a className="lp-logo" href="#">
              <BrandLogo />
            </a>
            <p>
              A small Portuguese team making it easier for families to
              restore the photographs that matter most.
              <br /><br />
              <a href="https://restoreoldphoto.app" style={{color: '#FF933A'}}>restoreoldphoto.app</a>
            </p>
            <p style={{ fontSize: 12, opacity: 0.7 }}>
              Made with care by people who have also lost someone.
            </p>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#features">Features</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="desktop.html">Web app</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="mailto:hello@obviousbubbles.pt">Contact</a></li>
              <li><a href="mailto:abuse@obviousbubbles.pt">Report abuse</a></li>
            </ul>
          </div>
          <div>
            <h5>Legal</h5>
            <ul>
              <li><a href="/privacy.html">Privacy policy</a></li>
              <li><a href="/terms.html">Terms of service</a></li>
              <li><a href="mailto:privacy@obviousbubbles.pt">Data subject requests</a></li>
            </ul>
          </div>
        </div>
        <div className="lp-footer-bottom">
          <span>© 2026</span>
          <span>
            Made with{' '}
            <span aria-label="love" role="img" style={{ color: '#e53935' }}>♥</span>
            {' '}in Portugal
          </span>
        </div>
      </div>
    </footer>
  );
}

// ─── App ──────────────────────────────────────────────────────────────
function Landing() {
  return (
    <div data-screen-label="Landing page">
      <Nav />
      <Hero />
      <Press />
      <How />
      <Features />
      <Gallery />
      <Testimonials />
      <Pricing />
      <FAQ />
      <CtaBand />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Landing />);