// LockdubhPage.jsx — Lockdubh desktop app product page (Tiber Course house style)

const LOCKDUBH_FEATURES = [
  {
    n: 'I.',
    title: 'Dictate anywhere',
    body: 'Press a shortcut, speak, and your words are typed into any app — email, documents, anywhere. The AI tidies spelling and grammar as you go.',
  },
  {
    n: 'II.',
    title: 'Read aloud',
    body: 'Highlight any text and hear it in a natural voice, with each word lit as it is read. Adjust the speed and voice to suit you.',
  },
  {
    n: 'III.',
    title: 'Private and offline',
    body: 'The AI runs entirely on your own computer. No accounts, no cloud, no per-use fees. Your words never leave your device.',
  },
  {
    n: 'IV.',
    title: 'Made for dyslexia',
    body: 'A dyslexia-friendly font, larger text, a warm low-glare background, and word-by-word read-along — all built in.',
  },
];

const LOCKDUBH_FAQ = [
  {
    q: 'Is my data private?',
    a: 'Yes. The AI runs on your computer, so nothing you say or read is sent anywhere.',
  },
  {
    q: 'Which computers does it work on?',
    a: 'Mac now, with Windows coming soon. One purchase covers all of your Macs.',
  },
  {
    q: 'Can I try it before I buy?',
    a: 'Yes — every purchase starts with a 14-day free trial. You won’t be charged until the trial ends, and you can cancel any time before then.',
  },
];

/* ── A small, on-brand product mockup: the read-aloud reader with one word lit ── */
const ReaderMockup = () => (
  <div style={{
    background: '#FBFAF7', border: `1px solid ${C.border}`, borderRadius: 16,
    boxShadow: C.shadowCard, overflow: 'hidden', width: '100%', maxWidth: 440,
  }}>
    {/* title bar */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '14px 18px', borderBottom: `1px solid ${C.borderSubtle}`, background: C.linen }}>
      <span style={{ width: 9, height: 9, borderRadius: '50%', background: C.borderStrong }} />
      <span style={{ width: 9, height: 9, borderRadius: '50%', background: C.borderStrong }} />
      <span style={{ width: 9, height: 9, borderRadius: '50%', background: C.borderStrong }} />
      <span style={{ marginLeft: 8, fontFamily: F.sans, fontSize: 10, fontWeight: 600, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.dust }}>Lockdubh · Reader</span>
    </div>
    {/* passage with read-along highlight */}
    <div style={{ padding: '30px 26px 24px', fontFamily: F.body, fontSize: 19, lineHeight: 1.95, color: C.ink }}>
      Reading should feel easy. Lockdubh reads each line to you and{' '}
      <span style={{ background: C.brass, color: '#fff', padding: '2px 6px', borderRadius: 5 }}>lights</span>{' '}
      every word as it goes.
    </div>
    {/* controls */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 18px', borderTop: `1px solid ${C.borderSubtle}` }}>
      <span style={{
        width: 30, height: 30, borderRadius: '50%', background: C.brass, color: '#fff',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, flexShrink: 0,
      }}>❚❚</span>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: C.brass }} />
      <span style={{ fontFamily: F.sans, fontSize: 11, fontWeight: 500, letterSpacing: '1px', textTransform: 'uppercase', color: C.ash }}>Reading aloud</span>
      <span style={{ marginLeft: 'auto', fontFamily: F.mono, fontSize: 12, color: C.dust }}>1.0×</span>
    </div>
  </div>
);

const LockdubhPage = ({ onNav }) => {
  const [checkoutOpen, setCheckoutOpen] = React.useState(false);
  const [narrow, setNarrow] = React.useState(false);

  React.useEffect(() => {
    const mql = window.matchMedia('(max-width: 860px)');
    const on = () => setNarrow(mql.matches);
    on();
    mql.addEventListener ? mql.addEventListener('change', on) : mql.addListener(on);
    return () => { mql.removeEventListener ? mql.removeEventListener('change', on) : mql.removeListener(on); };
  }, []);

  const lineItems = [{ id: 'lockdubh', title: 'Lockdubh — lifetime licence', price: 29, n: 1 }];

  const scrollToPricing = () => {
    const el = document.getElementById('lockdubh-pricing');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const heading = (text, size) => (
    <h2 style={{
      fontFamily: F.display, fontStyle: 'italic', fontWeight: 400,
      fontSize: size || 'clamp(26px, 3.4vw, 38px)', lineHeight: 1.18, letterSpacing: '-0.4px',
      color: C.ink, margin: '8px 0 0',
    }}>{text}</h2>
  );

  return (
    <React.Fragment>
      {/* ── Hero ── */}
      <section style={{ background: C.parchment, borderBottom: `1px solid ${C.borderSubtle}` }}>
        <div style={{
          maxWidth: 1100, margin: '0 auto', padding: narrow ? '128px 28px 72px' : '150px 40px 104px',
          display: 'grid', gridTemplateColumns: narrow ? '1fr' : '1.04fr 0.96fr',
          gap: narrow ? 48 : 56, alignItems: 'center',
        }}>
          <div style={{ maxWidth: 560 }}>
            <Label color={C.brass}>Desktop app · Mac</Label>
            <h1 style={{
              fontFamily: F.display, fontStyle: 'italic', fontWeight: 400,
              fontSize: 'clamp(34px, 4.6vw, 50px)', lineHeight: 1.12, letterSpacing: '-0.6px',
              color: C.ink, margin: '8px 0 22px',
            }}>
              Write, read and think — out loud.
            </h1>
            <p style={{ fontFamily: F.body, fontSize: 'clamp(16px, 1.6vw, 17.5px)', color: C.ash, lineHeight: 1.7, maxWidth: 520, marginBottom: 32 }}>
              Lockdubh is a private, on-device assistant for dyslexic minds. Speak and it types
              for you. Highlight any text and it reads it aloud. Ask the built-in AI anything —
              all on your own computer.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
              <BrassBtn onClick={() => setCheckoutOpen(true)}>Buy — £29 one-off</BrassBtn>
              <Btn onClick={scrollToPricing}>Try free for 14 days</Btn>
            </div>
            <div style={{ fontFamily: F.body, fontSize: 13, color: C.dust, marginTop: 22 }}>
              Works fully offline · No subscription · One purchase covers all your Macs
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: narrow ? 'flex-start' : 'flex-end' }}>
            <ReaderMockup />
          </div>
        </div>
      </section>

      {/* ── Features ── */}
      <SectionWrap linen>
        <Label color={C.brass}>What it does</Label>
        {heading('Three tools, one quiet helper.')}

        <div style={{
          display: 'grid',
          gridTemplateColumns: narrow ? '1fr' : 'repeat(2, 1fr)',
          gap: 18, marginTop: 44,
        }}>
          {LOCKDUBH_FEATURES.map((f) => (
            <div key={f.n} style={{
              background: C.parchment, border: `1px solid ${C.border}`, borderRadius: 14,
              padding: '32px 30px', boxShadow: C.shadowLift,
            }}>
              <div style={{ fontFamily: F.display, fontStyle: 'italic', fontWeight: 400, fontSize: 26, color: C.brass, marginBottom: 14, lineHeight: 1 }}>{f.n}</div>
              <h3 style={{ fontFamily: F.sans, fontSize: 18, fontWeight: 600, color: C.ink, marginBottom: 10, letterSpacing: '-0.2px' }}>{f.title}</h3>
              <p style={{ fontFamily: F.body, fontSize: 14.5, color: C.ash, lineHeight: 1.62, margin: 0 }}>{f.body}</p>
            </div>
          ))}
        </div>
      </SectionWrap>

      {/* ── Pricing ── */}
      <SectionWrap>
        <div id="lockdubh-pricing" style={{ scrollMarginTop: 100 }} />
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <Label color={C.brass}>One price</Label>
          {heading('Pay once. Yours for good.')}
        </div>

        <div style={{
          maxWidth: 420, margin: '0 auto', background: C.parchment,
          border: `1px solid ${C.border}`, borderRadius: 16, boxShadow: C.shadowCard,
          padding: 40, textAlign: 'center',
        }}>
          <div style={{ fontFamily: F.display, fontStyle: 'italic', fontWeight: 400, fontSize: 56, color: C.ink, lineHeight: 1 }}>£29</div>
          <div style={{ fontFamily: F.sans, fontSize: 11, fontWeight: 600, letterSpacing: '1.8px', textTransform: 'uppercase', color: C.dust, marginTop: 10 }}>
            One-off licence · pay once
          </div>

          <div style={{ height: 1, background: C.border, margin: '26px 0' }} />

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, textAlign: 'left', marginBottom: 28 }}>
            {['All three tools — dictate, read aloud, chat', 'Free updates', 'Use it on all your Macs', '14-day free trial first'].map((t) => (
              <div key={t} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ color: C.brass, fontFamily: F.sans, fontWeight: 700, lineHeight: 1.5 }}>✓</span>
                <span style={{ fontFamily: F.body, fontSize: 14.5, color: C.ash, lineHeight: 1.5 }}>{t}</span>
              </div>
            ))}
          </div>

          <BrassBtn onClick={() => setCheckoutOpen(true)} style={{ width: '100%' }}>Buy Lockdubh</BrassBtn>
          <div style={{ fontFamily: F.body, fontSize: 12, color: C.dust, marginTop: 16, lineHeight: 1.5 }}>
            Includes a 14-day free trial — you won’t be charged until day 15, cancel before then and pay nothing.
          </div>
          <div style={{ fontFamily: F.body, fontSize: 12, color: C.dust, marginTop: 8, lineHeight: 1.5 }}>
            One-off · no subscription · VAT shown at checkout
          </div>
        </div>
      </SectionWrap>

      {/* ── FAQ ── */}
      <SectionWrap linen>
        <Label color={C.brass}>Good to know</Label>
        {heading('A few questions.', 'clamp(24px, 3vw, 34px)')}
        <div style={{ maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 18, marginTop: 40 }}>
          {LOCKDUBH_FAQ.map((item) => (
            <div key={item.q} style={{ background: C.parchment, border: `1px solid ${C.border}`, borderRadius: 12, padding: '24px 26px' }}>
              <div style={{ fontFamily: F.sans, fontSize: 15, fontWeight: 600, color: C.ink, marginBottom: 8 }}>{item.q}</div>
              <div style={{ fontFamily: F.body, fontSize: 14.5, color: C.ash, lineHeight: 1.62 }}>{item.a}</div>
            </div>
          ))}
        </div>
      </SectionWrap>

      <CheckoutModal
        open={checkoutOpen}
        onClose={() => setCheckoutOpen(false)}
        lineItems={lineItems}
        totalGBP={29}
        onNav={onNav}
      />
    </React.Fragment>
  );
};

Object.assign(window, { LockdubhPage });