// Final landing page — Editorial direction with Tweaks
// Magazine-style serif, warm cream, generous whitespace
// WhatsApp primary, Telegram secondary, AI soft-disclosed in footer

// ─── Channel config ────────────────────────────────────────────────────────
// TODO(emily): replace WhatsApp number when account is provisioned
//              format must be country code + number, no plus, no spaces
//              e.g. 447700900123  (UK) or 14155551234 (US)
const CHANNELS = {
  whatsapp: {
    number: 'TODO_PHONE_NUMBER',          // ← TODO: fill once WhatsApp Business is set up
    available: false,                     // flip to true when number is real
  },
  // TODO(emily): replace `start` payload per-CTA so we can attribute traffic
  //              source (e.g. ?start=hero, ?start=footer)
  telegram: {
    handle: 'emily_stylist_bot',
    startPayload: 'TODO',                 // ← TODO: per-CTA campaign code
    available: true,
  },
};

const isMobile = () =>
  typeof navigator !== 'undefined' &&
  /android|iphone|ipad|ipod|mobile/i.test(navigator.userAgent);

const trackCtaClick = (channel, location) => {
  try { window.posthog && window.posthog.capture('cta_clicked', { channel, location }); } catch (e) {}
  try { window.fbq && window.fbq('track', 'Contact', { channel, location }); } catch (e) {}
  try { window.ttq && window.ttq.track && window.ttq.track('ClickButton', { channel, location }); } catch (e) {}
};

const buildTelegramUrl = (location) => {
  const payload = location ? `loc_${location}` : CHANNELS.telegram.startPayload;
  return `https://t.me/${CHANNELS.telegram.handle}?start=${payload}`;
};

const buildWhatsAppUrl = (location, prefill) => {
  const text = encodeURIComponent(prefill || "Hi Emily — I'd like to start.");
  return `https://wa.me/${CHANNELS.whatsapp.number}?text=${text}&utm_source=${location || 'site'}`;
};

const ACCENTS = {
  brick:  { name: 'Brick',  hex: '#a64d2e' },
  ink:    { name: 'Ink',    hex: '#1a1612' },
  olive:  { name: 'Olive',  hex: '#6a6a3a' },
  navy:   { name: 'Navy',   hex: '#2a3a5a' },
  saffron:{ name: 'Saffron',hex: '#c89146' },
};

const HERO_COPY = {
  promise: {
    h1a: 'Your', h1b: 'personal', h1c: 'stylist,',
    h1d: 'in your pocket.',
    sub: "Emily is a personal stylist who actually knows you. Send a photo, ask anything — get thoughtful, specific advice the way a friend who happens to have impeccable taste would give it.",
  },
  question: {
    h1a: 'What', h1b: 'should', h1c: 'I wear?',
    h1d: 'Ask Emily.',
    sub: "Send her a photo of your closet, your outfit, or anything you're tempted to buy. She'll reply within minutes with specific, considered advice — like a stylish friend who actually has time for you.",
  },
  relationship: {
    h1a: 'Style', h1b: 'is', h1c: 'personal.',
    h1d: 'So is Emily.',
    sub: "A small circle of clients. Long, ongoing conversations. Emily remembers your closet, your fits, your favourite colours, and the date you have on Friday. That's how good styling actually works.",
  },
};

function FinalLanding() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [launcher, setLauncher] = React.useState(null); // null | { channel, location }

  const launch = (channel, location) => {
    trackCtaClick(channel, location);
    if (!CHANNELS[channel].available) {
      // Fall back to opening the QR modal anyway, with a "coming soon" note
      setLauncher({ channel, location, comingSoon: true });
      return;
    }
    if (isMobile()) {
      const url = channel === 'telegram'
        ? buildTelegramUrl(location)
        : buildWhatsAppUrl(location);
      window.location.href = url;
    } else {
      setLauncher({ channel, location, comingSoon: false });
    }
  };

  const accent = ACCENTS[tw.accent]?.hex || ACCENTS.brick.hex;
  const copy = HERO_COPY[tw.heroCopy] || HERO_COPY.promise;

  // Density scale
  const D = tw.density === 'compact' ? 0.85 : tw.density === 'comfy' ? 1.12 : 1;
  const pad = (n) => Math.round(n * D);

  const t = {
    cream: '#f5f0e8', creamDeep: '#ebe3d5',
    ink: '#1a1612', inkSoft: '#4a3f33', inkMuted: '#857463',
    rule: '#d6c9b3', accent,
    whatsapp: '#25d366',
  };
  const fontSerif = '"Cormorant Garamond", "Times New Roman", serif';
  const fontSans = '"Geist", -apple-system, "Helvetica Neue", sans-serif';
  const fontMono = '"Geist Mono", ui-monospace, monospace';

  return (
    <div style={{
      width: '100%', minHeight: '100vh',
      background: t.cream, color: t.ink,
      fontFamily: fontSans, fontSize: 15, lineHeight: 1.5,
      letterSpacing: '-0.005em',
    }}>
      {/* NAV */}
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: `${pad(28)}px ${pad(64)}px`,
        borderBottom: `1px solid ${t.rule}`,
      }}>
        <div style={{ fontFamily: fontSerif, fontSize: 28, fontStyle: 'italic', fontWeight: 500 }}>Emily</div>
        <nav style={{ display: 'flex', gap: 36, fontSize: 13, color: t.inkSoft, letterSpacing: '0.02em' }}>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href="#how">How it works</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href="#stories">Stories</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href="#pricing">Pricing</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href="#faq">FAQ</a>
        </nav>
        <a href="#cta" style={{
          background: t.ink, color: t.cream, border: 'none',
          padding: '10px 18px', fontSize: 13, fontFamily: fontSans,
          letterSpacing: '0.02em', cursor: 'pointer', borderRadius: 0,
          textDecoration: 'none',
        }}>
          Start chatting →
        </a>
      </header>

      {/* HERO */}
      <section style={{ padding: `${pad(88)}px ${pad(64)}px ${pad(72)}px` }}>
        <div style={{
          fontFamily: fontMono, fontSize: 11, color: t.inkMuted,
          letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 40,
        }}>
          № 01 — Personal Styling, Reimagined
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' }}>
          <div>
            <h1 style={{
              fontFamily: fontSerif, fontSize: 124, fontWeight: 400,
              lineHeight: 0.92, letterSpacing: '-0.025em', margin: 0, color: t.ink,
            }}>
              {copy.h1a}<br />
              <span style={{ fontStyle: 'italic', color: accent }}>{copy.h1b}</span><br />
              {copy.h1c}
              <span style={{
                fontFamily: fontSans, fontWeight: 300, fontSize: 56,
                fontStyle: 'normal', verticalAlign: 'super',
                marginLeft: 14, color: t.inkSoft,
              }}>
                {copy.h1d}
              </span>
            </h1>
          </div>

          <div style={{ paddingBottom: 12 }}>
            <p style={{
              fontFamily: fontSerif, fontSize: 22, lineHeight: 1.45,
              color: t.inkSoft, margin: '0 0 28px', fontWeight: 400,
            }}>
              {copy.sub}
            </p>

            <div style={{ display: 'flex', gap: 12, marginBottom: 18 }}>
              <button onClick={() => launch('whatsapp', 'hero')} style={{
                background: t.whatsapp, color: '#fff', border: 'none',
                padding: '14px 22px', fontSize: 14, fontFamily: fontSans,
                fontWeight: 500, cursor: 'pointer', borderRadius: 0,
                display: 'flex', alignItems: 'center', gap: 10, flex: 1,
                justifyContent: 'center',
              }}>
                <WhatsAppGlyph /> Message on WhatsApp
              </button>
              <button onClick={() => launch('telegram', 'hero')} style={{
                background: 'transparent', color: t.ink,
                border: `1px solid ${t.ink}`, padding: '14px 22px', fontSize: 14,
                fontFamily: fontSans, fontWeight: 500, cursor: 'pointer', borderRadius: 0,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <TelegramGlyph color={t.ink} /> Telegram
              </button>
            </div>
            <div style={{ fontFamily: fontMono, fontSize: 10, color: t.inkMuted, letterSpacing: '0.1em' }}>
              FREE WHILE IN BETA  ·  NO APP TO DOWNLOAD  ·  REPLIES IN MINUTES
            </div>
          </div>
        </div>
      </section>

      {/* MASTHEAD STRIP */}
      <section style={{
        borderTop: `1px solid ${t.rule}`, borderBottom: `1px solid ${t.rule}`,
        padding: `20px ${pad(64)}px`, display: 'flex', justifyContent: 'space-between',
        fontFamily: fontMono, fontSize: 11, color: t.inkSoft,
        letterSpacing: '0.14em', textTransform: 'uppercase',
      }}>
        <span>Spring/Summer ’26</span>
        <span>Issue 01</span>
        <span>Featured: Wardrobe Edits</span>
        <span>Stylist: Emily</span>
        <span>★ ★ ★ ★ ★  Beta Readers</span>
      </section>

      {/* CHAT PREVIEW */}
      {tw.showChat && (
        <section id="stories" style={{ padding: `${pad(96)}px ${pad(64)}px`, background: t.creamDeep }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: fontMono, fontSize: 11, color: t.inkMuted, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 24 }}>
                № 02 — A Conversation
              </div>
              <h2 style={{ fontFamily: fontSerif, fontSize: 64, fontWeight: 400, lineHeight: 1, margin: '0 0 24px', letterSpacing: '-0.02em' }}>
                The kind of advice<br/><span style={{ fontStyle: 'italic' }}>you'd text a friend</span> for.
              </h2>
              <p style={{ fontSize: 16, color: t.inkSoft, lineHeight: 1.6, maxWidth: 380, margin: '0 0 28px' }}>
                Specific, honest, contextual. Emily asks the right follow-up questions,
                remembers what's in your closet, and gives you advice you can actually wear out the door.
              </p>
              <div style={{ borderTop: `1px solid ${t.rule}`, paddingTop: 20, display: 'flex', gap: 32 }}>
                <Stat n="<2 min" label="Avg response" tokens={t} font={fontSerif} mono={fontMono} />
                <Stat n="24/7" label="Whenever" tokens={t} font={fontSerif} mono={fontMono} />
                <Stat n="Free" label="During beta" tokens={t} font={fontSerif} mono={fontMono} />
              </div>
            </div>

            <ChatPanel theme="editorial" tokens={t} fontSans={fontSans} fontMono={fontMono} accent={accent} />
          </div>
        </section>
      )}

      {/* USE CASES */}
      <section id="how" style={{ padding: `${pad(96)}px ${pad(64)}px` }}>
        <div style={{ fontFamily: fontMono, fontSize: 11, color: t.inkMuted, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 24 }}>
          № 03 — She's Helped With
        </div>
        <h2 style={{ fontFamily: fontSerif, fontSize: 72, fontWeight: 400, lineHeight: 0.95, margin: '0 0 56px', letterSpacing: '-0.025em', maxWidth: 900 }}>
          From <span style={{ fontStyle: 'italic' }}>Monday's commute</span> to
          Saturday's <span style={{ fontStyle: 'italic' }}>last-minute date</span>.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: t.rule, border: `1px solid ${t.rule}` }}>
          {USE_CASES.map((u, i) => (
            <UseCaseCard key={i} index={i} {...u} tokens={t} fontSerif={fontSerif} fontMono={fontMono} accent={accent} />
          ))}
        </div>
      </section>

      {/* PRICING */}
      {tw.showPricing && (
        <section id="pricing" style={{ padding: `${pad(96)}px ${pad(64)}px`, background: t.ink, color: t.cream }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: fontMono, fontSize: 11, color: 'rgba(245,240,232,0.5)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 24 }}>
                № 04 — Pricing
              </div>
              <h2 style={{ fontFamily: fontSerif, fontSize: 88, fontWeight: 400, lineHeight: 0.95, margin: 0, letterSpacing: '-0.025em' }}>
                Free,<br/>
                <span style={{ fontStyle: 'italic', color: '#e0c89a' }}>while we're<br/>finding our feet.</span>
              </h2>
            </div>
            <div>
              <div style={{ borderTop: `1px solid rgba(245,240,232,0.2)`, paddingTop: 32, marginBottom: 32 }}>
                <div style={{ fontFamily: fontSerif, fontSize: 56, lineHeight: 1, marginBottom: 12 }}>
                  $0<span style={{ fontSize: 22, color: 'rgba(245,240,232,0.6)', marginLeft: 8 }}>/ month</span>
                </div>
                <div style={{ fontFamily: fontMono, fontSize: 11, color: '#e0c89a', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 24 }}>
                  Beta Membership · Limited Spots
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 15, lineHeight: 1.9, color: 'rgba(245,240,232,0.85)' }}>
                  <li>— Unlimited messages, photos, follow-ups</li>
                  <li>— Wardrobe memory: she remembers what's yours</li>
                  <li>— Outfit advice for any occasion</li>
                  <li>— Shopping picks tailored to your budget</li>
                  <li>— Priority access when paid tiers open</li>
                </ul>
              </div>
              <button onClick={() => launch('whatsapp', 'pricing')} style={{
                background: t.cream, color: t.ink, border: 'none',
                padding: '16px 24px', fontSize: 14, fontFamily: fontSans,
                fontWeight: 500, cursor: 'pointer', borderRadius: 0, width: '100%',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              }}>
                <WhatsAppGlyph /> Claim a beta spot on WhatsApp
              </button>
            </div>
          </div>
        </section>
      )}

      {/* FAQ */}
      <section id="faq" style={{ padding: `${pad(96)}px ${pad(64)}px`, borderTop: `1px solid ${t.rule}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'flex-start' }}>
          <div style={{ position: 'sticky', top: 32 }}>
            <div style={{ fontFamily: fontMono, fontSize: 11, color: t.inkMuted, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 24 }}>
              № 05 — FAQ
            </div>
            <h2 style={{ fontFamily: fontSerif, fontSize: 64, fontWeight: 400, lineHeight: 0.95, margin: 0, letterSpacing: '-0.025em' }}>
              The honest<br/><span style={{ fontStyle: 'italic' }}>answers.</span>
            </h2>
          </div>
          <div>
            {FAQS.map((f, i) => (
              <FAQRow key={i} {...f} tokens={t} fontSerif={fontSerif} fontMono={fontMono} />
            ))}
          </div>
        </div>
      </section>

      {/* FOOTER CTA */}
      <section id="cta" style={{ padding: `${pad(120)}px ${pad(64)}px ${pad(80)}px`, textAlign: 'center' }}>
        <h2 style={{ fontFamily: fontSerif, fontSize: 96, fontWeight: 400, lineHeight: 0.95, margin: '0 0 28px', letterSpacing: '-0.03em' }}>
          Style that feels<br/>
          <span style={{ fontStyle: 'italic', color: accent }}>personal</span>
          <span> — because it is.</span>
        </h2>
        <div style={{ display: 'inline-flex', gap: 12, marginTop: 16 }}>
          <button onClick={() => launch('whatsapp', 'footer')} style={{
            background: t.whatsapp, color: '#fff', border: 'none',
            padding: '16px 28px', fontSize: 14, fontFamily: fontSans, fontWeight: 500,
            cursor: 'pointer', borderRadius: 0, display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <WhatsAppGlyph /> Start on WhatsApp
          </button>
          <button onClick={() => launch('telegram', 'footer')} style={{
            background: 'transparent', color: t.ink, border: `1px solid ${t.ink}`,
            padding: '16px 28px', fontSize: 14, fontFamily: fontSans, fontWeight: 500,
            cursor: 'pointer', borderRadius: 0, display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <TelegramGlyph color={t.ink} /> Telegram
          </button>
        </div>
      </section>

      <footer style={{
        padding: `32px ${pad(64)}px`, borderTop: `1px solid ${t.rule}`,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: fontMono, fontSize: 10, color: t.inkMuted,
        letterSpacing: '0.14em', textTransform: 'uppercase',
      }}>
        <span>© Emily Studio · 2026</span>
        <span>Privacy · Terms · Contact</span>
        <span style={{ fontStyle: 'italic', textTransform: 'none', letterSpacing: 0, fontFamily: fontSerif, fontSize: 12 }}>
          AI-assisted styling, with care.
        </span>
      </footer>

      {/* TWEAKS PANEL */}
      <CookieBanner tokens={t} fontSerif={fontSerif} fontSans={fontSans} fontMono={fontMono} />
      <ChannelLauncher
        launcher={launcher}
        onClose={() => setLauncher(null)}
        tokens={t}
        fontSerif={fontSerif}
        fontSans={fontSans}
        fontMono={fontMono}
      />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero copy" />
        <TweakRadio
          label="Headline"
          value={tw.heroCopy}
          options={[
            { value: 'promise', label: 'Promise' },
            { value: 'question', label: 'Question' },
            { value: 'relationship', label: 'Relationship' },
          ]}
          onChange={(v) => setTweak('heroCopy', v)}
        />
        <TweakSection label="Theme" />
        <TweakSelect
          label="Accent"
          value={tw.accent}
          options={Object.entries(ACCENTS).map(([k,v]) => ({ value: k, label: v.name }))}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakRadio
          label="Density"
          value={tw.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakSection label="Sections" />
        <TweakToggle label="Chat preview" value={tw.showChat} onChange={(v) => setTweak('showChat', v)} />
        <TweakToggle label="Pricing block" value={tw.showPricing} onChange={(v) => setTweak('showPricing', v)} />
      </TweaksPanel>
    </div>
  );
}

function Stat({ n, label, tokens, font, mono }) {
  return (
    <div style={{ minWidth: 0 }}>
      <div style={{ fontFamily: font, fontSize: 36, lineHeight: 1, marginBottom: 4, whiteSpace: 'nowrap' }}>{n}</div>
      <div style={{ fontFamily: mono, fontSize: 10, color: tokens.inkMuted, letterSpacing: '0.14em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{label}</div>
    </div>
  );
}

const FAQS = [
  {
    q: 'Wait — is Emily a real person?',
    a: "Emily is a styling service powered by AI, designed to feel like a relationship with a real stylist. She remembers your closet, your fits, and your past conversations. The persona, taste, and reasoning come from working with real stylists — but the replies are generated. We'd rather tell you upfront than have you wonder.",
  },
  {
    q: "What do you do with my photos and information?",
    a: "Your photos and conversations are stored securely so Emily can remember context across messages. Nothing is shared, sold, or used to train public models. You can ask her to forget anything, or delete your data entirely, at any time — just message her.",
  },
  {
    q: 'How fast does she actually reply?',
    a: "Most threads see a first reply within 1–2 minutes. Long, detailed shopping breakdowns can take a little longer. She's available 24/7 — no business hours, no waiting until Monday.",
  },
  {
    q: 'What does she cost after beta?',
    a: "We're still figuring that out. Likely a monthly membership in the range of a single coffee per week, with a free tier for occasional questions. Beta members lock in founder pricing for as long as they stay.",
  },
  {
    q: 'Do I have to set up an account?',
    a: "No app, no account, no email. Tap the WhatsApp button, say hi, and you're in. She'll ask a few casual questions in the first thread to start building your style profile — that's the whole onboarding.",
  },
  {
    q: 'Will she push me to buy things?',
    a: "Never. Emily's job is honest advice, including 'skip this' and 'you already own something better.' We don't take affiliate commissions or kickbacks from any brand she mentions.",
  },
  {
    q: 'Does she work for any style, body, or budget?',
    a: "Yes — across genders, body types, age groups, and price ranges. She'll match her recommendations to your budget and what you actually wear, not what's trending. Tell her what's in scope; she'll work within it.",
  },
];

function FAQRow({ q, a, tokens, fontSerif, fontMono }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderTop: `1px solid ${tokens.rule}` }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
        padding: '24px 0', display: 'flex', justifyContent: 'space-between',
        alignItems: 'flex-start', gap: 24, textAlign: 'left',
        fontFamily: fontSerif, fontSize: 26, fontWeight: 400, lineHeight: 1.2,
        color: tokens.ink, letterSpacing: '-0.01em',
      }}>
        <span>{q}</span>
        <span style={{ fontFamily: fontMono, fontSize: 16, color: tokens.inkMuted, flexShrink: 0, marginTop: 4 }}>
          {open ? '−' : '+'}
        </span>
      </button>
      {open && (
        <div style={{
          paddingBottom: 28, paddingRight: 48, fontSize: 15.5,
          color: tokens.inkSoft, lineHeight: 1.65,
        }}>
          {a}
        </div>
      )}
    </div>
  );
}

const USE_CASES = [
  { tag: 'Daily', title: 'Office, errands, life', body: '"Need a look for work today — something polished but not stiff." A layered outfit using what you already own, with a backup if the weather shifts.', swatches: ['#2a3a5a', '#e8e2d4', '#7a6a52'] },
  { tag: 'Special', title: 'Date nights & weddings', body: '"Casual dinner — stylish but not overdone." She asks the right questions, then sends a complete look down to the earrings.', swatches: ['#1a1612', '#3a3a3a', '#5a5a5a'] },
  { tag: 'Wardrobe', title: 'What you already have', body: '"Silk blouse, navy blazer, black trousers — how do I wear them together?" Three combinations, each with reasoning.', swatches: ['#a64d2e', '#f5f0e8', '#1a1612'] },
  { tag: 'Shopping', title: 'Buy this, skip that', body: '"Want a pair of trousers — which colour?" Cream first, olive next, chocolate with caveats — each tied to what\'s already in your closet, plus fit and fabric notes for your frame.', swatches: ['#7a8a6a', '#c9b89a', '#4a3f33'] },
  { tag: 'Seasonal', title: 'Capsule planning', body: '"Help me update my wardrobe for spring." A curated capsule layout with versatile pieces you can mix into anything.', swatches: ['#c9b89a', '#7a8a6a', '#e8e2d4'] },
  { tag: 'Urgent', title: 'You have an hour', body: 'Send a photo of your options. Emily picks one, tells you why, and sends you out the door looking sharp.', swatches: ['#1a3a4a', '#e0c89a', '#a64d2e'] },
];

function UseCaseCard({ tag, title, body, swatches, index, tokens, fontSerif, fontMono }) {
  return (
    <div style={{
      background: tokens.cream, padding: '32px 28px',
      display: 'flex', flexDirection: 'column', gap: 16, minHeight: 280,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <span style={{ fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          {String(index + 1).padStart(2, '0')} · {tag}
        </span>
        <div style={{ display: 'flex', gap: 4 }}>
          {swatches.map((c, i) => (
            <div key={i} style={{ width: 14, height: 14, borderRadius: '50%', background: c, border: `1px solid ${tokens.rule}` }} />
          ))}
        </div>
      </div>
      <h3 style={{ fontFamily: fontSerif, fontSize: 32, fontWeight: 400, lineHeight: 1, margin: 0, letterSpacing: '-0.01em' }}>
        {title}
      </h3>
      <p style={{ margin: 0, fontSize: 14, color: tokens.inkSoft, lineHeight: 1.5 }}>{body}</p>
    </div>
  );
}

function ChatPanel({ tokens, fontSans, fontMono, accent }) {
  return (
    <div style={{
      background: '#fbf8f1', border: `1px solid ${tokens.rule}`, overflow: 'hidden',
      boxShadow: '0 30px 60px rgba(60,40,20,0.08)',
    }}>
      <div style={{ padding: '16px 22px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${tokens.rule}` }}>
        <div style={{
          width: 38, height: 38, borderRadius: '50%', background: accent,
          color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: '"Cormorant Garamond", serif', fontSize: 22, fontStyle: 'italic',
        }}>E</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: fontSans, fontSize: 14, fontWeight: 500, color: tokens.ink }}>Emily</div>
          <div style={{ fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#5cb85c', marginRight: 6 }} />
            Online · Replies in minutes
          </div>
        </div>
      </div>
      <div style={{ padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ textAlign: 'center', fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted, letterSpacing: '0.16em', margin: '4px 0 12px' }}>THURSDAY · 7:14 PM</div>
        <Bubble side="user" color={tokens.ink} text="I want to buy a pair of trousers but I'm not sure which colour makes the most sense with everything else I own." textColor="#fff" font={fontSans} />
        <Bubble side="emily" color="#fff" textColor={tokens.ink} font={fontSans} text={
          <>
            Smart move — they'll bridge your jeans and your work skirts. Looking at what's already in your wardrobe, three most versatile, in order:
            <ol style={{ margin: '8px 0 0', padding: '0 0 0 18px', lineHeight: 1.6 }}>
              <li><b>Cream</b> — top pick. Will land with your camel coat, navy blazer, and tan loafers.</li>
              <li><b>Olive</b> — earthier, breaks up all the navy and black bottoms.</li>
              <li><b>Chocolate</b> — richer alternative, but careful with the trench (browns can clash).</li>
            </ol>
            <div style={{ marginTop: 8 }}>If it's only one pair: cream. Wide-leg or straight?</div>
          </>
        } />
        <Bubble side="user" color={tokens.ink} text="Idk, what do you recommend? And fabric?" textColor="#fff" font={fontSans} />
        <Bubble side="emily" color="#fff" textColor={tokens.ink} font={fontSans} text={
          <>
            Straight-leg for your frame — clean line, lengthens, works tucked or untucked. Skip wide-leg for now (overwhelms the silk blouses you wear most).
            <div style={{ marginTop: 6 }}>Fabric: a wool-blend with a touch of stretch. Drapes properly, won't bag at the knee, works office → dinner.</div>
            <div style={{ marginTop: 6 }}>Since you like Aritzia, their Effortless Pant in cream is a great start. Toteme's Twisted Seam if you want a step up.</div>
          </>
        } />
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
          <div style={{ background: '#fff', padding: '10px 14px', borderRadius: '14px 14px 14px 4px', display: 'flex', gap: 4 }}>
            <Dot delay={0}/><Dot delay={0.15}/><Dot delay={0.3}/>
          </div>
          <span style={{ fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted, letterSpacing: '0.1em' }}>EMILY IS TYPING…</span>
        </div>
      </div>
      <div style={{ padding: '14px 22px', borderTop: `1px solid ${tokens.rule}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 22, height: 22, borderRadius: '50%', border: `1px solid ${tokens.inkMuted}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: tokens.inkMuted, fontSize: 14 }}>+</div>
        <div style={{ flex: 1, fontFamily: fontSans, fontSize: 13, color: tokens.inkMuted }}>Send a photo or ask anything…</div>
        <div style={{ fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted, letterSpacing: '0.1em' }}>↵</div>
      </div>
    </div>
  );
}

const TRACKERS = [
  {
    key: 'essential',
    required: true,
    label: 'Essential',
    desc: 'Keeps the site working — session, security, and load-balancing. Cannot be turned off.',
    items: ['Session cookie', 'Cloudflare', 'Sentry (errors)'],
  },
  {
    key: 'analytics',
    required: false,
    label: 'Product analytics',
    desc: 'Helps us see which sections land and where people drop off, so we can make Emily clearer.',
    items: ['PostHog', 'Plausible'],
  },
  {
    key: 'marketing',
    required: false,
    label: 'Marketing',
    desc: 'Lets us measure ads and reach the right people on social — only loaded if you opt in.',
    items: ['Meta Pixel', 'TikTok Pixel'],
  },
];

function CookieBanner({ tokens, fontSerif, fontSans, fontMono }) {
  const [state, setState] = React.useState('loading'); // 'loading' | 'banner' | 'prefs' | 'saved'
  const [prefs, setPrefs] = React.useState({ essential: true, analytics: true, marketing: false });

  React.useEffect(() => {
    try {
      const raw = localStorage.getItem('emily_cookie_consent');
      if (raw) {
        const parsed = JSON.parse(raw);
        if (parsed && parsed.savedAt) {
          setPrefs({ ...prefs, ...parsed.prefs });
          setState('saved');
          return;
        }
      }
    } catch (e) {}
    setState('banner');
  }, []);

  const save = (next) => {
    const finalPrefs = { ...next, essential: true };
    try {
      localStorage.setItem('emily_cookie_consent', JSON.stringify({
        prefs: finalPrefs, savedAt: new Date().toISOString(), v: 1,
      }));
      window.dispatchEvent(new CustomEvent('emily:consent-updated', { detail: finalPrefs }));
    } catch (e) {}
    setPrefs(finalPrefs);
    setState('saved');
  };

  const acceptAll = () => save({ essential: true, analytics: true, marketing: true });
  const essentialOnly = () => save({ essential: true, analytics: false, marketing: false });

  if (state === 'loading' || state === 'saved') {
    // Persistent tiny re-open handle
    if (state === 'saved') {
      return (
        <button
          onClick={() => setState('prefs')}
          style={{
            position: 'fixed', left: 16, bottom: 16, zIndex: 2147483644,
            background: 'transparent', border: `1px solid ${tokens.rule}`,
            color: tokens.inkMuted, padding: '6px 10px', fontSize: 10,
            fontFamily: fontMono, letterSpacing: '0.14em', textTransform: 'uppercase',
            cursor: 'pointer', borderRadius: 0, backdropFilter: 'blur(8px)',
          }}
          title="Cookie preferences"
        >
          Cookies
        </button>
      );
    }
    return null;
  }

  // PREFERENCES MODAL
  if (state === 'prefs') {
    return (
      <div style={{
        position: 'fixed', inset: 0, zIndex: 2147483646,
        background: 'rgba(20,18,16,0.55)', backdropFilter: 'blur(4px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
      }}>
        <div style={{
          width: '100%', maxWidth: 580, background: tokens.cream, color: tokens.ink,
          border: `1px solid ${tokens.ink}`, fontFamily: fontSans,
          maxHeight: '90vh', overflow: 'auto',
          boxShadow: '0 40px 100px rgba(0,0,0,0.35)',
        }}>
          <div style={{ padding: '32px 36px 24px', borderBottom: `1px solid ${tokens.rule}` }}>
            <div style={{
              fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted,
              letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 12,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span>Cookie Preferences</span>
              <button onClick={() => setState('banner')} style={{
                background: 'transparent', border: 'none', color: tokens.inkMuted,
                fontFamily: fontMono, fontSize: 14, cursor: 'pointer', padding: 0,
              }}>×</button>
            </div>
            <div style={{ fontFamily: fontSerif, fontSize: 30, fontWeight: 400, lineHeight: 1.15, letterSpacing: '-0.01em', marginBottom: 10 }}>
              Choose what to <span style={{ fontStyle: 'italic' }}>share</span>.
            </div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: tokens.inkSoft }}>
              We keep tracking light. You can change these any time from the "Cookies" link in the footer.
            </p>
          </div>

          <div>
            {TRACKERS.map((t, i) => (
              <div key={t.key} style={{
                padding: '20px 36px',
                borderBottom: i < TRACKERS.length - 1 ? `1px solid ${tokens.rule}` : 'none',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, marginBottom: 8 }}>
                  <div style={{ fontFamily: fontSerif, fontSize: 19, fontWeight: 400, letterSpacing: '-0.005em' }}>
                    {t.label}
                  </div>
                  <ConsentToggle
                    checked={t.required ? true : prefs[t.key]}
                    disabled={t.required}
                    onChange={(v) => setPrefs({ ...prefs, [t.key]: v })}
                    tokens={tokens}
                    fontMono={fontMono}
                  />
                </div>
                <p style={{ margin: '0 0 10px', fontSize: 13, lineHeight: 1.55, color: tokens.inkSoft }}>{t.desc}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {t.items.map((it) => (
                    <span key={it} style={{
                      fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted,
                      letterSpacing: '0.08em', textTransform: 'uppercase',
                      border: `1px solid ${tokens.rule}`, padding: '3px 8px',
                    }}>{it}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div style={{
            padding: '20px 36px', display: 'flex', gap: 10, flexWrap: 'wrap',
            justifyContent: 'space-between', alignItems: 'center',
            borderTop: `1px solid ${tokens.rule}`, background: tokens.creamSoft || tokens.cream,
          }}>
            <a href="#" onClick={(e) => e.preventDefault()} style={{
              fontSize: 12, fontFamily: fontSans, color: tokens.inkMuted,
              textDecoration: 'underline', textUnderlineOffset: 3,
            }}>Privacy policy →</a>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <button onClick={essentialOnly} style={{
                background: 'transparent', color: tokens.ink,
                border: `1px solid ${tokens.ink}`, padding: '10px 16px', fontSize: 12.5,
                fontFamily: fontSans, fontWeight: 500, cursor: 'pointer', borderRadius: 0,
              }}>Reject all</button>
              <button onClick={() => save(prefs)} style={{
                background: 'transparent', color: tokens.ink,
                border: `1px solid ${tokens.ink}`, padding: '10px 16px', fontSize: 12.5,
                fontFamily: fontSans, fontWeight: 500, cursor: 'pointer', borderRadius: 0,
              }}>Save choices</button>
              <button onClick={acceptAll} style={{
                background: tokens.ink, color: tokens.cream, border: 'none',
                padding: '10px 18px', fontSize: 12.5, fontFamily: fontSans,
                fontWeight: 500, cursor: 'pointer', borderRadius: 0,
              }}>Accept all</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // INITIAL BANNER
  return (
    <div style={{
      position: 'fixed', left: 24, bottom: 24, zIndex: 2147483645,
      maxWidth: 440, background: tokens.cream, color: tokens.ink,
      border: `1px solid ${tokens.ink}`, padding: '22px 24px',
      boxShadow: '0 24px 60px rgba(0,0,0,0.18)', fontFamily: fontSans,
    }}>
      <div style={{
        fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted,
        letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 10,
      }}>
        A Note About Cookies
      </div>
      <div style={{ fontFamily: fontSerif, fontSize: 24, fontWeight: 400, lineHeight: 1.2, marginBottom: 10, letterSpacing: '-0.01em' }}>
        We use a few <span style={{ fontStyle: 'italic' }}>essential cookies</span> — and ask before the rest.
      </div>
      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: tokens.inkSoft, marginBottom: 16 }}>
        Essentials keep the site working. Analytics help us understand which pages land, so we can make Emily better. Change your mind any time.
      </p>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
        <button onClick={acceptAll} style={{
          background: tokens.ink, color: tokens.cream, border: 'none',
          padding: '11px 18px', fontSize: 13, fontFamily: fontSans,
          fontWeight: 500, cursor: 'pointer', borderRadius: 0,
        }}>Accept all</button>
        <button onClick={essentialOnly} style={{
          background: 'transparent', color: tokens.ink,
          border: `1px solid ${tokens.ink}`, padding: '11px 18px', fontSize: 13,
          fontFamily: fontSans, fontWeight: 500, cursor: 'pointer', borderRadius: 0,
        }}>Essentials only</button>
        <a href="#" onClick={(e) => { e.preventDefault(); setState('prefs'); }} style={{
          fontSize: 12.5, fontFamily: fontSans, color: tokens.inkMuted,
          textDecoration: 'underline', textUnderlineOffset: 3, marginLeft: 4,
          cursor: 'pointer',
        }}>Preferences</a>
      </div>
    </div>
  );
}

function ConsentToggle({ checked, disabled, onChange, tokens, fontMono }) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={() => !disabled && onChange(!checked)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        background: 'transparent', border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
        padding: 0, opacity: disabled ? 0.55 : 1,
      }}
    >
      <span style={{
        fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted,
        letterSpacing: '0.14em', textTransform: 'uppercase',
      }}>
        {disabled ? 'Required' : (checked ? 'On' : 'Off')}
      </span>
      <span style={{
        position: 'relative', width: 38, height: 22, borderRadius: 999,
        background: checked ? tokens.ink : 'transparent',
        border: `1px solid ${tokens.ink}`, transition: 'background 200ms ease',
      }}>
        <span style={{
          position: 'absolute', top: 2, left: checked ? 18 : 2,
          width: 16, height: 16, borderRadius: 999,
          background: checked ? tokens.cream : tokens.ink,
          transition: 'left 200ms ease',
        }} />
      </span>
    </button>
  );
}

function Bubble({ side, color, text, textColor, font }) {
  const isUser = side === 'user';
  return (
    <div style={{ display: 'flex', justifyContent: isUser ? 'flex-end' : 'flex-start' }}>
      <div style={{
        background: color, color: textColor, padding: '10px 14px', maxWidth: '75%',
        fontFamily: font, fontSize: 13.5, lineHeight: 1.5,
        borderRadius: isUser ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
      }}>{text}</div>
    </div>
  );
}

function Dot({ delay }) {
  return <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#1a1612', opacity: 0.5, animation: `emTypingDot 1.2s ${delay}s infinite ease-in-out` }} />;
}

function ChannelLauncher({ launcher, onClose, tokens, fontSerif, fontSans, fontMono }) {
  if (!launcher) return null;
  const { channel, location, comingSoon } = launcher;
  const isWA = channel === 'whatsapp';
  const url = isWA ? buildWhatsAppUrl(location) : buildTelegramUrl(location);
  const channelName = isWA ? 'WhatsApp' : 'Telegram';
  const accentColor = isWA ? tokens.whatsapp : '#229ED9';

  // QR code via api.qrserver.com — free, no auth, no tracking on their end
  const qrSrc = comingSoon
    ? null
    : `https://api.qrserver.com/v1/create-qr-code/?size=240x240&margin=2&data=${encodeURIComponent(url)}`;

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 2147483646,
        background: 'rgba(20,18,16,0.55)', backdropFilter: 'blur(4px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%', maxWidth: 460, background: tokens.cream, color: tokens.ink,
          border: `1px solid ${tokens.ink}`, fontFamily: fontSans,
          boxShadow: '0 40px 100px rgba(0,0,0,0.35)',
        }}
      >
        <div style={{ padding: '28px 32px 20px', borderBottom: `1px solid ${tokens.rule}` }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12,
          }}>
            <span style={{
              fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted,
              letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>Open on Your Phone</span>
            <button onClick={onClose} style={{
              background: 'transparent', border: 'none', color: tokens.inkMuted,
              fontFamily: fontMono, fontSize: 18, cursor: 'pointer', padding: 0, lineHeight: 1,
            }}>×</button>
          </div>
          <div style={{
            fontFamily: fontSerif, fontSize: 28, fontWeight: 400, lineHeight: 1.15,
            letterSpacing: '-0.01em',
          }}>
            {comingSoon
              ? <>WhatsApp is <span style={{ fontStyle: 'italic' }}>coming soon</span>.</>
              : <>Scan to open <span style={{ fontStyle: 'italic' }}>{channelName}</span>.</>
            }
          </div>
        </div>

        <div style={{ padding: '28px 32px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
          {comingSoon ? (
            <div style={{ textAlign: 'center', padding: '20px 0' }}>
              <div style={{ fontFamily: fontSerif, fontSize: 19, color: tokens.inkSoft, lineHeight: 1.5, marginBottom: 18 }}>
                Our WhatsApp Business number isn't live yet. Telegram is ready now — same Emily, different door.
              </div>
              <button onClick={() => {
                trackCtaClick('telegram', location + '_fallback');
                if (isMobile()) window.location.href = buildTelegramUrl(location);
                else window.open(buildTelegramUrl(location), '_blank');
              }} style={{
                background: tokens.ink, color: tokens.cream, border: 'none',
                padding: '13px 22px', fontSize: 13.5, fontFamily: fontSans,
                fontWeight: 500, cursor: 'pointer', borderRadius: 0,
                display: 'inline-flex', alignItems: 'center', gap: 10,
              }}>
                <TelegramGlyph color={tokens.cream} /> Open Telegram instead
              </button>
            </div>
          ) : (
            <>
              <div style={{
                padding: 14, background: '#fff', border: `1px solid ${tokens.rule}`,
              }}>
                <img src={qrSrc} width={216} height={216} alt={`QR code to open ${channelName}`} style={{ display: 'block' }} />
              </div>
              <div style={{ fontFamily: fontSerif, fontSize: 17, color: tokens.inkSoft, textAlign: 'center', lineHeight: 1.5 }}>
                Open your camera, point it at the code, then tap the link.
              </div>
              <div style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 12,
                fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted,
                letterSpacing: '0.18em', textTransform: 'uppercase',
              }}>
                <span style={{ flex: 1, height: 1, background: tokens.rule }} />
                <span>or</span>
                <span style={{ flex: 1, height: 1, background: tokens.rule }} />
              </div>
              <a
                href={url}
                target="_blank"
                rel="noopener noreferrer"
                onClick={() => trackCtaClick(channel, location + '_link')}
                style={{
                  background: accentColor, color: '#fff', textDecoration: 'none',
                  padding: '13px 22px', fontSize: 13.5, fontFamily: fontSans,
                  fontWeight: 500, borderRadius: 0,
                  display: 'inline-flex', alignItems: 'center', gap: 10,
                }}
              >
                {isWA ? <WhatsAppGlyph /> : <TelegramGlyph color="#fff" />}
                Open {channelName} link
              </a>
            </>
          )}
        </div>

        <div style={{
          padding: '14px 32px', borderTop: `1px solid ${tokens.rule}`,
          fontFamily: fontMono, fontSize: 10, color: tokens.inkMuted,
          letterSpacing: '0.14em', textTransform: 'uppercase', textAlign: 'center',
        }}>
          {comingSoon
            ? 'WhatsApp launching soon · Beta open on Telegram'
            : 'First reply in 1–2 min · Free during beta'}
        </div>
      </div>
    </div>
  );
}

function WhatsAppGlyph({ color = '#fff', size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden>
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413-.074-.124-.272-.198-.57-.347zm-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884zm8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
    </svg>
  );
}

function TelegramGlyph({ color = '#fff', size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden>
      <path d="M12 0C5.374 0 0 5.373 0 12s5.374 12 12 12 12-5.373 12-12S18.626 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005-.001l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.643.135-.953l11.566-4.458c.535-.196 1.006.128.832.94z"/>
    </svg>
  );
}

window.FinalLanding = FinalLanding;