// v3-founder.jsx — Founder's Note + promises strip. The honest, founder-scale
// credibility moment. Placement: after FAQSection, before WaitlistSection.
//
// NOTE: text in [brackets] is placeholder — swap for the real founder story/name.
// Reuses window primitives from lantic-ui.jsx: BRAND, SAT, SF, MONO, Cortex, useInView, useViewport.

const { BRAND: FN_BRAND, SAT: FN_SAT, SF: FN_SF, MONO: FN_MONO } = window;
const FN_SCRIPT = '"Caveat", cursive';

const FN_PROMISES = [
  'Privacy first',
  'You stay in control',
  'Founder pricing for life',
  'Built in Australia',
  'Onboarded by hand',
];

function FounderNote() {
  const ref = React.useRef(null);
  const inView = window.useInView(ref, 0.2);
  const vw = window.useViewport();
  const phone = vw < 820;
  const Orb = window.Cortex;

  return (
    <section ref={ref} style={{
      position: 'relative', padding: phone ? '92px 20px 96px' : '150px 32px 160px',
      background: FN_BRAND.canvas, overflow: 'hidden', borderTop: `1px solid ${FN_BRAND.hair}` }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 46% 50% at 78% 24%, ${FN_BRAND.skyDark}1f 0%, transparent 60%)` }}/>

      <div style={{ maxWidth: 820, margin: '0 auto', position: 'relative',
        opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(18px)',
        transition: 'opacity 800ms ease, transform 800ms cubic-bezier(.22,1,.36,1)' }}>

        <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 30 }}>
          <Orb size={34} animate={true} glowAlpha={0.55}/>
          <span style={{ fontFamily: FN_MONO, fontSize: 11, color: FN_BRAND.skyMist,
            letterSpacing: '0.26em', fontWeight: 600, textTransform: 'uppercase' }}>Why we’re building Lantic</span>
        </div>

        {/* the letter */}
        <div style={{ fontFamily: FN_SAT, fontWeight: 500,
          fontSize: phone ? 'clamp(20px, 5vw, 24px)' : 'clamp(24px, 2.6vw, 31px)',
          letterSpacing: -0.6, lineHeight: 1.45, color: FN_BRAND.ink, textWrap: 'pretty' }}>
          <p style={{ margin: '0 0 22px' }}>
            I’m not a big tech company. I’m one person who ran a small business and
            watched the admin quietly eat the hours that actually mattered.
          </p>
          <p style={{ margin: '0 0 22px' }}>
            [Add your story here: the moment you realised the load was too much, the
            night you missed, the thing that slipped. Two or three honest sentences in
            your own words. This is the part owners will trust most.]
          </p>
          <p style={{ margin: 0, color: FN_BRAND.sub }}>
            So I’m building the assistant I wished I’d had. Not a chatbot. Someone who
            knows your world, carries the weight with you, and hands your time back.
            We’re early, and we’ll get some things wrong. But we’ll build it honestly,
            in the open, with the people who join first.
          </p>
        </div>

        {/* signature */}
        <div style={{ marginTop: phone ? 34 : 42, display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: FN_SCRIPT, fontSize: phone ? 38 : 46, color: FN_BRAND.skyMist, lineHeight: 1 }}>[Your name]</span>
          <span style={{ fontFamily: FN_SF, fontSize: 14.5, color: FN_BRAND.dim, letterSpacing: 0.2 }}>Founder, Lantic</span>
        </div>

        {/* promises strip */}
        <div style={{ marginTop: phone ? 40 : 52, paddingTop: phone ? 30 : 36,
          borderTop: `1px solid ${FN_BRAND.hair}`, display: 'flex', flexWrap: 'wrap', gap: phone ? 10 : 12 }}>
          {FN_PROMISES.map(p => (
            <span key={p} style={{ display: 'inline-flex', alignItems: 'center', gap: 9,
              padding: '9px 15px', borderRadius: 20,
              background: 'rgba(56,189,248,.08)', border: `1px solid rgba(56,189,248,.24)` }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke={FN_BRAND.skyLight} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span style={{ fontFamily: FN_SF, fontSize: 13.5, fontWeight: 500, color: FN_BRAND.ink, letterSpacing: -0.1 }}>{p}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FounderNote = FounderNote;