// Linkyro — final site
// Warm cream + ink + rust palette (from Direction A). Signal dashboard
// energy + animated sonar viz (from Direction B). "Every morning, a queue
// in your voice" flow section (from Direction A).

const TOKENS = `
  --ink:#0e1a2b; --ink-2:#3b4a5e; --ink-3:#7c8597; --ink-4:#a6a097;
  --cream:#f5f1ea; --paper:#fbf8f2; --paper-2:#efe9de;
  --line:rgba(14,26,43,.10); --line-2:rgba(14,26,43,.16);
  --accent:#c4612f; --accent-2:#e08c5c; --accent-soft:#f0d9c2; --accent-light:#e8c8a8;
  --blue:#1f3a68; --blue-2:#3a5a98; --blue-soft:#dde4f0; --blue-light:#9bb4d6;
  --serif:"Fraunces","Source Serif 4",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
`;

const SUPPORT_EMAIL = window.LINKYRO_SUPPORT_EMAIL || 'info@businessprocessautomation.onmicrosoft.com';
const BOOKING_URL = window.LINKYRO_BOOKING_URL || `mailto:${SUPPORT_EMAIL}?subject=Linkyro%20booking%20request`;
const LOGIN_URL = window.LINKYRO_LOGIN_URL || 'login.html';
const X_URL = window.LINKYRO_SOCIAL_X_URL || 'https://x.com/aiworkflowauto';
const LINKEDIN_URL = window.LINKYRO_LINKEDIN_URL || 'https://www.linkedin.com';

const Site = () =>
<div className="lk">
    <style>{`
      html, body, #root{ height:100%; }
      body{ overflow:hidden; }
      .lk{ ${TOKENS} font-family:"Inter",system-ui,sans-serif; color:var(--ink); background:#fff7ef; position:relative; height:100vh; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; scroll-behavior:smooth; scroll-padding-top:72px; }
      .lk > section, .lk > footer{ scroll-snap-align:start; scroll-snap-stop:always; }

      /* Each section gets its own SOLID color block, paired in the Enblox
         pastel palette. Footer stays dark navy. */
      .sec-cream{ background:#fff7ef; }
      .sec-pink{ background:#ffe1ea; }
      .sec-peach{ background:#ffe5d2; }
      .sec-yellow{ background:#fff3cf; }
      .sec-lavender{ background:#e8defc; }
      .sec-coral{ background:#ffd9cc; }
      .sec-mint{ background:#e2f1de; }
      .sec-magenta{ background:#ffd6e5; }
      .sec-purple{ background:#e8defc; }
      .sec-orange{ background:#ffe5d2; }
      .lk *{ box-sizing:border-box; }
      .lk a{ color:inherit; text-decoration:none; cursor:pointer; }
      .lk button{ font-family:inherit; cursor:pointer; border:0; }
      .lk-wrap{ max-width:1440px; margin:0 auto; padding:0 72px; }
      .mono{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
      .serif-em{ font-family:var(--serif); font-style:italic; font-weight:300; }
      .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:999px; font-size:13.5px; font-weight:500; letter-spacing:-.005em; transition:transform .15s, box-shadow .15s, background .15s; }
      .btn.primary{ background:var(--ink); color:#fff; box-shadow:0 10px 28px -10px rgba(14,26,43,.4); }
      .btn.primary:hover{ transform:translateY(-1px); box-shadow:0 16px 36px -12px rgba(14,26,43,.5); }
      .btn.outline{ background:#fff; border:1px solid var(--ink); color:var(--ink); padding:13px 23px; }
      .btn.outline:hover{ background:var(--ink); color:#fff; }
      .btn.ghost{ background:transparent; border:1px solid var(--line-2); color:var(--ink); }
      .btn.ghost:hover{ background:#fafafa; }
      .btn .arr{ display:inline-flex; width:22px; height:22px; border-radius:50%; background:currentColor; align-items:center; justify-content:center; }
      .btn.primary .arr{ background:#fff; color:var(--ink); }
      .btn.outline .arr{ background:var(--ink); color:#fff; }
      .btn.outline:hover .arr{ background:#fff; color:var(--ink); }
      .btn .arr svg{ width:11px; height:11px; }
    `}</style>
    <Nav />
    <Hero />
    <ReelBand />
    <Features />
    <BeforeAfter />
    <Pricing />
    <Faq />
    <Footer />
  </div>;


// ───────── FIXED BG ─────────
const FixedBg = () =>
<div className="lk-fxbg">
    <ChromaRays />
    <div className="vignette"></div>
  </div>;


// Luma-style radial rays: thin sharp streaks from the screen center with
// chromatic-aberration glow (R / G / B offset draws via 'lighter' blend).
const ChromaRays = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const cv = ref.current;if (!cv) return;
    const ctx = cv.getContext('2d');
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const resize = () => {
      const W = cv.clientWidth,H = cv.clientHeight;
      cv.width = W * dpr;cv.height = H * dpr;ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();window.addEventListener('resize', resize);

    // Each ray: angle, length, width, palette index, twinkle phase, base alpha,
    // and a slight per-ray rotation so the whole field drifts.
    const N = 360;
    const rays = [];
    const palette = [
    // warm dominant (rust / amber / peach)
    [255, 138, 58],
    [255, 178, 90],
    [255, 110, 50],
    [255, 90, 30],
    [255, 200, 130],
    [245, 165, 100],
    // cools peppered in
    [110, 200, 220],
    [80, 160, 255],
    [180, 130, 255],
    // whites for sparkle
    [255, 240, 220]];

    for (let i = 0; i < N; i++) {
      rays.push({
        ang: Math.random() * Math.PI * 2,
        inner: 40 + Math.random() * 120, // start distance from center
        len: 200 + Math.random() * 1400, // outward length
        w: 0.4 + Math.random() * 1.2, // thickness
        col: palette[Math.random() * palette.length | 0],
        ph: Math.random() * Math.PI * 2, // twinkle phase
        sp: 0.4 + Math.random() * 0.8, // twinkle speed
        drift: (Math.random() - 0.5) * 0.00015 // very slow angular drift
      });
    }

    let raf,t0 = performance.now();
    const loop = () => {
      const W = cv.clientWidth,H = cv.clientHeight;
      const cx = W / 2,cy = H / 2;
      const t = (performance.now() - t0) / 1000;

      // Pure black clear
      ctx.globalCompositeOperation = 'source-over';
      ctx.fillStyle = '#000';
      ctx.fillRect(0, 0, W, H);

      // Additive blend for streaks (light on black)
      ctx.globalCompositeOperation = 'lighter';
      ctx.lineCap = 'round';

      for (let i = 0; i < rays.length; i++) {
        const r = rays[i];
        r.ang += r.drift;
        // twinkle alpha
        const tw = 0.55 + 0.45 * Math.sin(t * r.sp + r.ph);
        const a = tw;

        const dirX = Math.cos(r.ang),dirY = Math.sin(r.ang);
        const x1 = cx + dirX * r.inner;
        const y1 = cy + dirY * r.inner;
        const x2 = cx + dirX * (r.inner + r.len);
        const y2 = cy + dirY * (r.inner + r.len);

        // gradient along the ray: bright head fading to nothing at far end
        const grad = ctx.createLinearGradient(x1, y1, x2, y2);
        const [R, G, B] = r.col;
        grad.addColorStop(0, `rgba(${R},${G},${B},0)`);
        grad.addColorStop(0.15, `rgba(${R},${G},${B},${(0.9 * a).toFixed(3)})`);
        grad.addColorStop(0.5, `rgba(${R},${G},${B},${(0.55 * a).toFixed(3)})`);
        grad.addColorStop(1, `rgba(${R},${G},${B},0)`);

        // CHROMATIC ABERRATION: draw the streak 3 times with tiny perpendicular
        // offsets, each tinted toward R/G/B. They additively combine → white at
        // the core with red/green/blue fringes on the edges.
        const perpX = -dirY,perpY = dirX;
        const off = 0.9; // pixels of separation
        const drawOffset = (color, ox, oy) => {
          const g2 = ctx.createLinearGradient(x1 + ox, y1 + oy, x2 + ox, y2 + oy);
          g2.addColorStop(0, `${color}00`);
          g2.addColorStop(0.15, `${color}${Math.floor(170 * a).toString(16).padStart(2, '0')}`);
          g2.addColorStop(0.5, `${color}${Math.floor(90 * a).toString(16).padStart(2, '0')}`);
          g2.addColorStop(1, `${color}00`);
          ctx.strokeStyle = g2;
          ctx.lineWidth = r.w;
          ctx.beginPath();
          ctx.moveTo(x1 + ox, y1 + oy);
          ctx.lineTo(x2 + ox, y2 + oy);
          ctx.stroke();
        };
        drawOffset('#ff0000', perpX * off, perpY * off);
        drawOffset('#00ff00', 0, 0);
        drawOffset('#0044ff', -perpX * off, -perpY * off);

        // Bright core in the ray's own hue, no offset
        ctx.strokeStyle = grad;
        ctx.lineWidth = r.w * 0.9;
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
      }

      // Soft warm glow at the very center (subtle)
      const coreR = Math.min(W, H) * 0.22;
      const core = ctx.createRadialGradient(cx, cy, 0, cx, cy, coreR);
      core.addColorStop(0, 'rgba(255,170,90,0.18)');
      core.addColorStop(0.5, 'rgba(255,120,50,0.06)');
      core.addColorStop(1, 'rgba(0,0,0,0)');
      ctx.fillStyle = core;
      ctx.beginPath();ctx.arc(cx, cy, coreR, 0, Math.PI * 2);ctx.fill();

      raf = requestAnimationFrame(loop);
    };
    loop();
    return () => {cancelAnimationFrame(raf);window.removeEventListener('resize', resize);};
  }, []);
  return <canvas ref={ref} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }} />;
};

// ───────── NAV ─────────
const Nav = () =>
<nav className="lk-nav">
    <style>{`
      .lk-nav{ position:sticky; top:0; z-index:50; background:rgba(255,247,239,.7); backdrop-filter:saturate(140%) blur(20px); -webkit-backdrop-filter:saturate(140%) blur(20px); border-bottom:1px solid var(--line); }
      .lk-nav .row{ display:flex; align-items:center; justify-content:space-between; height:72px; }
      .lk-brand{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:26px; letter-spacing:-.02em; }
      .lk-brand b{ font-style:normal; font-weight:500; }
      .lk-links{ display:flex; gap:32px; font-size:13.5px; color:var(--ink-2); }
      .lk-links a:hover{ color:var(--ink); }
      .lk-right{ display:flex; gap:12px; align-items:center; }
      .lk-ghost{ font-size:13px; color:var(--ink-2); }
      .lk-pill{ padding:9px 16px; border-radius:8px; background:var(--ink); color:var(--paper); font-size:13px; font-weight:500; }
    `}</style>
    <div className="lk-wrap row">
      <div className="lk-brand">Linky<b>ro</b></div>
      <div className="lk-links">
        <a href="#features">Features</a><a href="#receipts">Receipts</a><a href="#pricing">Pricing</a><a href="#faq">FAQ</a>
      </div>
      <div className="lk-right">
        <a className="lk-ghost" href={LOGIN_URL}>Client login</a>
        <a className="lk-pill" href={BOOKING_URL}>Book a slot →</a>
      </div>
    </div>
  </nav>;


// ───────── HERO ─────────
const Hero = () =>
<section className="lk-hero">
    <style>{`
      .lk-hero{ padding:60px 0 100px; position:relative; overflow:hidden; }
      .lk-hero .grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; min-height:720px; }
      .lk-tag{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:18px; letter-spacing:-.01em; color:var(--ink-2); display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:999px; background:rgba(10,102,194,.08); border:1px solid rgba(10,102,194,.2); }
      .lk-tag .lk-in{ width:22px; height:22px; border-radius:5px; background:#0a66c2; color:#fff; display:grid; place-items:center; font-family:"Inter",sans-serif; font-style:normal; font-weight:900; font-size:13px; letter-spacing:-.04em; }
      .lk-h1{ font-family:"Inter",system-ui,sans-serif; font-weight:900; font-size:clamp(56px,6.4vw,96px); line-height:.94; letter-spacing:-.045em; margin:14px 0 22px; color:var(--ink); }
      .lk-h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.03em; color:var(--accent); }
      .lk-lede{ font-size:17px; line-height:1.55; color:var(--ink-2); max-width:520px; margin:0 0 28px; }
      .lk-lede b{ color:var(--ink); font-weight:600; }
      .lk-ctas{ display:inline-flex; gap:12px; flex-wrap:wrap; }
      .lk-mini{ margin-top:36px; display:flex; gap:36px; }
      .lk-mini .lab{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
      .lk-mini .val{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:22px; letter-spacing:-.01em; }
      .lk-mini .val.acc{ color:var(--accent); }

      /* LEFT — phone + floating cards stage */
      .lk-stage{ position:relative; height:720px; perspective:1400px; perspective-origin:50% 50%; isolation:isolate; }
      .lk-stage .lk-phone-pos{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; transform-style:preserve-3d; }
      .lk-stage .aura{ position:absolute; inset:-40px; pointer-events:none; background:
        radial-gradient(38% 42% at 25% 55%, rgba(255,93,143,.55) 0%, rgba(255,93,143,0) 65%),
        radial-gradient(40% 45% at 78% 32%, rgba(196,120,255,.45) 0%, rgba(196,120,255,0) 60%),
        radial-gradient(42% 50% at 50% 25%, rgba(255,215,107,.55) 0%, rgba(255,215,107,0) 65%),
        radial-gradient(48% 55% at 50% 80%, rgba(255,157,90,.55) 0%, rgba(255,157,90,0) 70%);
        filter:blur(40px); z-index:0; }
    `}</style>
    <div className="lk-wrap grid">
      <div className="lk-stage">
        <div className="aura"></div>
        <FloatingHeroCards />
        <div className="lk-phone-pos"><PhoneInHand /></div>
      </div>
      <div>
        <div className="lk-tag"><span className="lk-in">in</span> Built for your LinkedIn.</div>
        <h1 className="lk-h1">Bored of your LinkedIn?<br />Give it <em>to us.</em></h1>
        <p className="lk-lede"><b>10× more impressions. 2× the followers.</b> Senior editors and our in-house tooling run your <b>LinkedIn</b> profile for thirty days — in your voice. Or every dollar back.</p>
        <div className="lk-ctas">
          <a className="btn primary" href={BOOKING_URL}>Hand over the keys <span className="arr"><svg viewBox="0 0 12 12" fill="none"><path d="M2 6h8m0 0L6 2m4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span></a>
          <a className="btn outline" href="#receipts">See the receipts <span className="arr"><svg viewBox="0 0 12 12" fill="none"><path d="M2 6h8m0 0L6 2m4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span></a>
        </div>
        <div className="lk-mini">
          <div><div className="lab">Flat fee</div><div className="val">$500</div></div>
          <div><div className="lab">Window</div><div className="val">30 days</div></div>
          <div><div className="lab">If flat</div><div className="val acc">full refund</div></div>
        </div>
      </div>
    </div>
  </section>;


// Floating 3D LinkedIn post cards in z-space around the phone.
const FloatingHeroCards = () => {
  const cards = [
  { x: '-8%', y: '8%', z: -160, rot: '-8deg', ry: '18deg', sc: .85, nm: 'Marisol Chen', ti: 'Founder · Plinth.io', body: <>The <b>unglamorous middle</b> of company-building is the whole job…</>, av: 'linear-gradient(135deg,#c4612f,#e8c8a8)', lift: '+1.2k impressions', delay: 0 },
  { x: '62%', y: '-2%', z: -220, rot: '7deg', ry: '-15deg', sc: .78, nm: 'Sara Khan', ti: 'CMO · ArcType', body: <>Pipeline gap math <b>only stings</b> because attribution is mostly fiction…</>, av: 'linear-gradient(135deg,#1f3a68,#9bb4d6)', lift: '+2 new DMs', delay: -1.5 },
  { x: '-12%', y: '52%', z: -120, rot: '-4deg', ry: '12deg', sc: .9, nm: 'Devon Park', ti: 'CEO · Embstack', body: <>Hired our second AE off a <b>single LinkedIn DM</b>. Recursion is a feature.</>, av: 'linear-gradient(135deg,#3a5a14,#7c8597)', lift: '+612% engagement', delay: -3 },
  { x: '58%', y: '62%', z: -180, rot: '6deg', ry: '-10deg', sc: .82, nm: 'Anika Bose', ti: 'Founder · Kiln', body: <>I tried writing one post a day for <b>thirty days</b>. Twenty-four were ghostwritten.</>, av: 'linear-gradient(135deg,#e08c5c,#f0d9c2)', lift: '+24× profile views', delay: -2 }];

  return (
    <div className="lk-floats">
      <style>{`
        .lk-floats{ position:absolute; inset:0; transform-style:preserve-3d; }
        @keyframes hcDrift{ 0%,100%{transform:translate3d(var(--tx,0),0,var(--tz,-150px)) rotate(var(--rz,0)) rotateY(var(--ry,0)) scale(var(--sc,1))} 50%{transform:translate3d(var(--tx,0),-14px,var(--tz,-150px)) rotate(var(--rz,0)) rotateY(var(--ry,0)) scale(var(--sc,1))} }
        .hc{ position:absolute; width:240px; padding:14px 14px 12px; background:#fff; border-radius:14px;
          box-shadow:0 36px 70px -32px rgba(14,26,43,.4), 0 0 0 1px rgba(14,26,43,.06);
          transform-style:preserve-3d; animation:hcDrift 7s ease-in-out infinite; z-index:1;
          backface-visibility:hidden; }
        .hc .hd{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
        .hc .av{ width:26px; height:26px; border-radius:50%; flex:none; }
        .hc .nm{ font-size:11.5px; font-weight:600; letter-spacing:-.01em; color:#0e1a2b; }
        .hc .ti{ font-size:9.5px; color:#7c8597; margin-top:1px; }
        .hc .bdy{ font-size:11.5px; line-height:1.45; color:#3b4a5e; }
        .hc .bdy b{ color:#0e1a2b; font-weight:600; }
        .hc .react{ display:flex; align-items:center; gap:4px; margin-top:10px; padding-top:8px; border-top:1px solid rgba(14,26,43,.06); font-size:10px; color:#7c8597; }
        .hc .emi{ width:14px; height:14px; border-radius:50%; border:1.5px solid #fff; display:inline-block; }
        .hc .emi.k1{ background:#0a66c2; }
        .hc .emi.k2{ background:#6dae4f; margin-left:-5px; }
        .hc .emi.k3{ background:#df704d; margin-left:-5px; }
        .hc .react b{ color:#0e1a2b; font-weight:600; margin-left:6px; }
        .hc .react .lift{ margin-left:auto; padding:3px 8px; border-radius:99px; background:#fff3cf; color:#7a4a14; font-family:JetBrains Mono, monospace; font-size:9px; letter-spacing:.08em; }
      `}</style>
      {cards.map((c, i) =>
      <div key={i} className="hc" style={{
        left: c.x, top: c.y,
        '--tx': '0', '--tz': `${c.z}px`, '--rz': c.rot, '--ry': c.ry, '--sc': c.sc,
        animationDelay: `${c.delay}s`
      }}>
          <div className="hd"><div className="av" style={{ background: c.av }}></div>
            <div><div className="nm">{c.nm}</div><div className="ti">{c.ti}</div></div>
          </div>
          <div className="bdy">{c.body}</div>
          <div className="react">
            <span className="emi k1"></span><span className="emi k2"></span><span className="emi k3"></span>
            <b>{(1200 + i * 840).toLocaleString()}</b>
            <span className="lift">{c.lift}</span>
          </div>
        </div>
      )}
    </div>);

};

// Hyperspace-style radial rays — streaks coming AT the camera from a vanishing
// point centered behind the phone. Tinted with brand rust + blue.
const RayField = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const cv = ref.current;if (!cv) return;
    const ctx = cv.getContext('2d');
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const resize = () => {
      const W = cv.clientWidth,H = cv.clientHeight;
      cv.width = W * dpr;cv.height = H * dpr;ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();window.addEventListener('resize', resize);

    // streaks: each has an angle, a current radius and speed. They start near
    // the center, accelerate outward (the closer to viewer => longer + thicker),
    // recycle when off-edge. The 'depth' makes them feel like they're traveling
    // through space toward us.
    const N = 260;
    const streaks = [];
    // Darker, saturated tones so they read against the warm cream backdrop via
    // multiply blending.
    const palette = [
    [120, 50, 18], // deep rust
    [165, 76, 30], // rust
    [200, 108, 55], // rust-2
    [110, 70, 40], // umber
    [22, 40, 76], // deep blue
    [50, 80, 130], // mid blue
    [80, 60, 40] // warm shadow
    ];
    for (let i = 0; i < N; i++) {
      streaks.push({
        ang: Math.random() * Math.PI * 2,
        r: Math.random() * 200, // starting radius (depth in)
        v: 0.6 + Math.random() * 1.6, // speed multiplier
        col: palette[Math.random() * palette.length | 0],
        len: 80 + Math.random() * 220,
        rotJitter: (Math.random() - 0.5) * 0.0008
      });
    }

    let raf,t0 = performance.now();
    const reset = (s) => {
      s.ang = Math.random() * Math.PI * 2;
      s.r = Math.random() * 60;
      s.v = 0.6 + Math.random() * 1.6;
      s.col = palette[Math.random() * palette.length | 0];
      s.len = 80 + Math.random() * 220;
    };
    const loop = () => {
      const W = cv.clientWidth,H = cv.clientHeight;
      const cx = W / 2,cy = H / 2;
      const maxR = Math.hypot(W, H) * 0.7;

      // Hard clear each frame; we draw with source-over and let each streak's
      // own gradient handle the soft tail.
      ctx.clearRect(0, 0, W, H);
      ctx.globalCompositeOperation = 'source-over';

      const dt = 1;
      for (let i = 0; i < streaks.length; i++) {
        const s = streaks[i];
        s.ang += s.rotJitter;
        s.r += s.v * (1 + s.r / maxR * 6) * dt;
        if (s.r > maxR) {reset(s);continue;}

        const dirX = Math.cos(s.ang),dirY = Math.sin(s.ang);
        const x = cx + dirX * s.r;
        const y = cy + dirY * s.r;
        const k = Math.min(1, s.r / maxR);
        const len = s.len * (0.2 + k * 1.3);
        const x2 = x - dirX * len;
        const y2 = y - dirY * len;

        const [r, g, b] = s.col;
        // Multiply blend mode handles darkening against the warm gradient.
        const head = `rgba(${r},${g},${b},${(0.35 + 0.5 * k).toFixed(3)})`;
        const tail = `rgba(${r},${g},${b},0)`;
        const grad = ctx.createLinearGradient(x, y, x2, y2);
        grad.addColorStop(0, head);grad.addColorStop(1, tail);

        ctx.strokeStyle = grad;
        ctx.lineWidth = 0.7 + k * 2.6;
        ctx.lineCap = 'round';
        ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x2, y2);ctx.stroke();
      }

      raf = requestAnimationFrame(loop);
    };
    loop();
    return () => {cancelAnimationFrame(raf);window.removeEventListener('resize', resize);};
  }, []);
  return <canvas ref={ref} className="rays" style={{ width: '100%', height: '100%', display: 'block' }} />;
};

// 3D-feeling phone with a tilt + soft drop shadow. Empty image-slot tucked
// below so the user can drop a real 3D phone-in-hand render that replaces
// this whole block visually.
const PhoneInHand = () =>
<div className="lk-phand">
    <style>{`
      .lk-phand{ position:relative; width:380px; height:580px; perspective:2000px; z-index:5; display:flex; align-items:center; justify-content:center; }
      .lk-phand .stage{ position:relative; transform-style:preserve-3d; transform:rotateY(-12deg) rotateX(5deg) rotateZ(-5deg); animation:phTilt 9s ease-in-out infinite alternate; filter:drop-shadow(0 60px 80px rgba(0,0,0,.18)); }
      @keyframes phTilt{ 0%{transform:rotateY(-14deg) rotateX(5deg) rotateZ(-6deg) translateY(0)} 100%{transform:rotateY(-9deg) rotateX(3deg) rotateZ(-4deg) translateY(-14px)} }
      .lk-phand .phone{ position:relative; width:260px; height:530px; border-radius:42px; background:linear-gradient(160deg,#1a1a1f 0%, #2a2a30 35%, #0a0a0c 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6); padding:7px; }
      .lk-phand .phone::after{ content:""; position:absolute; inset:0; border-radius:46px; background:linear-gradient(120deg, rgba(255,255,255,.16) 0%, transparent 45%, transparent 70%, rgba(255,255,255,.06) 100%); pointer-events:none; }
      .lk-phand .screen{ width:100%; height:100%; border-radius:34px; background:#fff; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
      .lk-phand .notch{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:84px; height:22px; background:#0a0a0c; border-radius:99px; z-index:5; }
      .lk-phand .notch::after{ content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:#1a1a1f; box-shadow:inset 0 0 0 1px #2a2a30; }
      .lk-phand .reflection{ position:absolute; left:50%; bottom:-100px; transform:translateX(-50%) rotateX(180deg); width:280px; height:200px; opacity:.25; pointer-events:none; mask-image:linear-gradient(to bottom, #000, transparent); -webkit-mask-image:linear-gradient(to bottom, #000, transparent); filter:blur(4px); }

      /* floating accent cards */
      .lk-phand .float{ position:absolute; padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); box-shadow:0 24px 50px -22px rgba(14,26,43,.35), 0 0 0 1px rgba(255,255,255,.7); display:flex; gap:10px; align-items:center; z-index:6; }
      .lk-phand .float .av{ width:28px; height:28px; border-radius:50%; }
      .lk-phand .float .t{ font-size:12.5px; font-weight:600; letter-spacing:-.01em; color:#0e1a2b; white-space:nowrap; }
      .lk-phand .float .s{ font-size:10px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#7c8597; margin-top:2px; white-space:nowrap; }
      .lk-phand .float.f1{ top:50px; right:-90px; animation:phFloat 7s ease-in-out infinite; }
      .lk-phand .float.f2{ top:240px; right:-120px; animation:phFloat 8s ease-in-out infinite -2s; }
      .lk-phand .float.f3{ bottom:90px; left:-90px; animation:phFloat 9s ease-in-out infinite -4s; }
      @keyframes phFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    `}</style>
    <div className="stage">
      <div className="phone">
        <div className="notch"></div>
        <div className="screen"><PhoneScreen /></div>
      </div>
    </div>
    {/* floating cards over the aura */}
    <div className="float f1">
      <div className="av" style={{ background: 'linear-gradient(135deg,#ff9d5a,#ffd76b)' }}></div>
      <div><div className="t">+412 impressions</div><div className="s">last 24h</div></div>
    </div>
    <div className="float f2">
      <div className="av" style={{ background: 'linear-gradient(135deg,#c478ff,#ff5d8f)' }}></div>
      <div><div className="t">Sara Khan · replied</div><div className="s">CMO · ArcType</div></div>
    </div>
    <div className="float f3">
      <div className="av" style={{ background: 'linear-gradient(135deg,#1f3a68,#ff5d8f)' }}></div>
      <div><div className="t">+612% engagement</div><div className="s">week 2 receipt</div></div>
    </div>
  </div>;


// Screen content rendered inside the phone — mock of a real LinkedIn profile.
const PhoneScreen = () =>
<div className="lk-pscr">
    <style>{`
      .lk-pscr{ height:100%; width:100%; background:#fff; position:relative; overflow:hidden; padding-top:36px; font-family:-apple-system,BlinkMacSystemFont,"Inter",sans-serif; color:#000000e6; }

      /* LinkedIn mobile top bar: tiny avatar, search pill, message icon */
      .lk-pscr .topbar{ position:absolute; top:36px; left:0; right:0; height:44px; background:#fff; display:flex; align-items:center; gap:8px; padding:0 10px; z-index:6; }
      .lk-pscr .topbar .me{ width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#c4612f,#0e1a2b); flex:none; }
      .lk-pscr .topbar .search{ flex:1; height:28px; border-radius:6px; background:#edf3f8; display:flex; align-items:center; gap:6px; padding:0 10px; font-size:10px; color:#8a8f95; }
      .lk-pscr .topbar .search .mag{ width:11px; height:11px; border:1.2px solid #8a8f95; border-radius:50%; position:relative; }
      .lk-pscr .topbar .search .mag::after{ content:""; position:absolute; right:-2px; bottom:-2px; width:5px; height:1.2px; background:#8a8f95; transform:rotate(45deg); }
      .lk-pscr .topbar .msg{ width:24px; height:24px; border-radius:50%; background:#edf3f8; display:grid; place-items:center; font-size:10px; color:#0a66c2; }

      /* Banner + gear */
      .lk-pscr .banner{ position:absolute; top:80px; left:0; right:0; height:78px; background:#0a0a0c; padding:8px 10px; overflow:hidden; }
      .lk-pscr .banner::before{ content:""; position:absolute; inset:0; background:
        radial-gradient(60% 80% at 80% 20%, rgba(196,120,255,.35) 0%, transparent 60%),
        radial-gradient(50% 80% at 10% 80%, rgba(122,200,255,.25) 0%, transparent 60%); }
      .lk-pscr .banner .helloworld{ position:relative; font-family:"JetBrains Mono",monospace; font-size:7.5px; letter-spacing:.04em; color:#7a9558; }
      .lk-pscr .banner .quote{ position:absolute; right:34px; top:18px; font-family:"Inter",sans-serif; font-weight:800; font-size:13px; line-height:1.05; text-align:right; }
      .lk-pscr .banner .quote .a{ color:#c478ff; }
      .lk-pscr .banner .quote .b{ color:#7a9558; }
      .lk-pscr .banner .gear{ position:absolute; top:8px; right:8px; width:22px; height:22px; background:#fff; border-radius:50%; display:grid; place-items:center; font-size:10px; color:#3b4a5e; box-shadow:0 2px 4px rgba(0,0,0,.15); }

      /* Profile head — illustrated portrait avatar */
      .lk-pscr .phead{ position:absolute; top:118px; left:14px; z-index:5; }
      .lk-pscr .phead .pic{ width:80px; height:80px; border-radius:50%; border:3px solid #fff; box-shadow:0 6px 14px rgba(0,0,0,.18); position:relative; overflow:hidden; background:linear-gradient(180deg,#a8c98a 0%, #6c8e58 60%, #3d5a35 100%); }
      .lk-pscr .phead .pic svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
      .lk-pscr .phead .cam{ position:absolute; bottom:2px; right:2px; width:18px; height:18px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:9px; color:#3b4a5e; box-shadow:0 1px 3px rgba(0,0,0,.2); z-index:2; }
      .lk-pscr .phead .ax{ position:absolute; right:14px; top:42px; display:flex; gap:4px; }
      .lk-pscr .phead .ax .ic{ width:22px; height:22px; border-radius:50%; border:1px solid #d0d4da; background:#fff; display:grid; place-items:center; color:#3b4a5e; }
      .lk-pscr .phead .ax .ic svg{ width:11px; height:11px; }

      /* Info block */
      .lk-pscr .info{ position:absolute; top:208px; left:14px; right:14px; }
      .lk-pscr .info .nm{ font-weight:700; font-size:15px; letter-spacing:-.01em; color:#000; line-height:1.1; }
      .lk-pscr .info .ti{ font-size:9.5px; color:#000; margin-top:3px; line-height:1.4; }
      .lk-pscr .info .ti .pipe{ color:#7c8597; }
      .lk-pscr .info .ti b{ font-weight:700; }
      .lk-pscr .info .comp{ font-size:9.5px; color:#7c8597; margin-top:2px; }
      .lk-pscr .info .loc{ font-size:9.5px; color:#7c8597; margin-top:2px; }
      .lk-pscr .info .loc .c{ color:#0a66c2; font-weight:600; margin-left:4px; }

      /* Open-to card */
      .lk-pscr .opent{ position:absolute; top:296px; left:14px; right:14px; padding:9px 10px 7px; border:1px solid #e0e0e0; border-radius:8px; font-size:9px; }
      .lk-pscr .opent .t{ font-weight:700; font-size:9.5px; margin-bottom:2px; }
      .lk-pscr .opent .b{ color:#3b4a5e; line-height:1.35; }
      .lk-pscr .opent .see{ color:#0a66c2; font-weight:600; margin-top:6px; }
      .lk-pscr .opent .row2{ margin-top:6px; padding-top:6px; border-top:1px solid #e0e0e0; display:flex; gap:6px; align-items:center; color:#3b4a5e; }
      .lk-pscr .opent .row2 .eye{ width:11px; height:11px; border-radius:50%; background:#3b4a5e; display:inline-block; }

      /* About */
      .lk-pscr .about{ position:absolute; top:394px; left:14px; right:14px; }
      .lk-pscr .about .h{ font-weight:700; font-size:11px; }
      .lk-pscr .about .b{ font-size:9px; color:#3b4a5e; line-height:1.4; margin-top:4px; }
      .lk-pscr .about .b b{ color:#000; font-weight:600; }

      /* live impression pop */
      .lk-pscr .pop{ position:absolute; left:10px; right:10px; bottom:14px; background:#0a66c2; color:#fff; border-radius:8px; padding:8px 10px; display:flex; align-items:center; gap:8px; box-shadow:0 14px 30px -10px rgba(10,102,194,.4); animation:phPop 4.5s ease-in-out infinite; z-index:7; }
      @keyframes phPop{ 0%,12%{transform:translateY(20px); opacity:0} 22%,80%{transform:translateY(0); opacity:1} 92%,100%{transform:translateY(-10px); opacity:0} }
      .lk-pscr .pop .ic{ width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:11px; }
      .lk-pscr .pop .t{ font-size:10.5px; font-weight:700; }
      .lk-pscr .pop .s{ font-size:8.5px; opacity:.85; margin-top:1px; }
    `}</style>

    <div className="topbar">
      <div className="me"></div>
      <div className="search"><span className="mag"></span>Search</div>
      <div className="msg">◦</div>
    </div>

    <div className="banner">
      <div className="helloworld">// Hello World.</div>
      <div className="quote" style={{ fontFamily: "Palatino" }}><span className="a">LinkedIn growth</span><br /><span className="b">using Linkyro only.</span></div>
      <div className="gear">⚙</div>
    </div>

    <div className="phead">
      <div className="pic">
        {/* Stylized portrait illustration: garden background, person silhouette with hair, face, dress */}
        <svg viewBox="0 0 80 80" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="skin" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#d99a72" />
              <stop offset="1" stopColor="#a86a48" />
            </linearGradient>
            <linearGradient id="hair" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#3a1f0c" />
              <stop offset="1" stopColor="#1f0e04" />
            </linearGradient>
            <linearGradient id="dress" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor="#2c4d6e" />
              <stop offset=".5" stopColor="#7d3a3a" />
              <stop offset="1" stopColor="#2c4d6e" />
            </linearGradient>
          </defs>
          {/* Background — sunlight greenery suggestion */}
          <rect width="80" height="80" fill="#6c8e58" />
          <circle cx="58" cy="18" r="22" fill="#a8c98a" opacity=".7" />
          <circle cx="12" cy="60" r="24" fill="#3d5a35" opacity=".55" />
          <circle cx="66" cy="68" r="18" fill="#9bbf7a" opacity=".6" />
          {/* Shoulders / dress */}
          <path d="M 8 80 C 12 60 20 54 40 54 C 60 54 68 60 72 80 Z" fill="url(#dress)" />
          {/* Dress pattern dots */}
          <circle cx="22" cy="68" r="3" fill="#c4612f" />
          <circle cx="40" cy="66" r="3.2" fill="#c4612f" />
          <circle cx="56" cy="70" r="3" fill="#c4612f" />
          {/* Neck */}
          <rect x="34" y="44" width="12" height="12" fill="url(#skin)" />
          {/* Hair back */}
          <path d="M 22 30 C 22 14 58 14 58 30 L 58 56 C 58 56 50 60 40 60 C 30 60 22 56 22 56 Z" fill="url(#hair)" />
          {/* Face */}
          <ellipse cx="40" cy="36" rx="13" ry="15" fill="url(#skin)" />
          {/* Hair front (side strands) */}
          <path d="M 26 28 C 28 20 36 18 40 20 C 44 18 52 20 54 28 L 54 38 C 50 32 30 32 26 38 Z" fill="url(#hair)" />
          {/* Eyebrows */}
          <path d="M 32 36 Q 35 34 38 36" stroke="#2a1408" strokeWidth="1" fill="none" strokeLinecap="round" />
          <path d="M 42 36 Q 45 34 48 36" stroke="#2a1408" strokeWidth="1" fill="none" strokeLinecap="round" />
          {/* Eyes */}
          <ellipse cx="35" cy="39" rx="1.2" ry="1.6" fill="#1a0e04" />
          <ellipse cx="45" cy="39" rx="1.2" ry="1.6" fill="#1a0e04" />
          {/* Mouth */}
          <path d="M 36 46 Q 40 48 44 46" stroke="#6a2a14" strokeWidth="1.2" fill="none" strokeLinecap="round" />
        </svg>
        <span className="cam">📷</span>
      </div>
    </div>

    <div className="info">
      <div className="nm">Marisol Chen</div>
      <div className="ti">Founder @ Plinth.io <span className="pipe">|</span> Building in public <span className="pipe">|</span> Operator</div>
      <div className="comp">Plinth.io · LinkedIn Top Voice</div>
      <div className="loc">Brooklyn, NY · <span className="c">9,840 followers</span></div>
    </div>

    <div className="opent">
      <div className="t">Open to ghostwriting opportunities</div>
      <div className="b">Founders, exec coaches, indie operators — happy to trade voice notes.</div>
      <div className="see">See all details</div>
      <div className="row2"><span className="eye"></span>Only your network</div>
    </div>

    <div className="about">
      <div className="h">About</div>
      <div className="b">📎 <b>plinth.io</b> — I write about the unglamorous middle of company‑building. 4 posts/week, ghost-edited by…<span style={{ color: '#7c8597' }}> See more</span></div>
    </div>

    <div className="pop"><div className="ic">in</div><div><div className="t">+1,240 impressions</div><div className="s">on LinkedIn · last 2 hours</div></div></div>
  </div>;


// ───────── REEL BAND (scrolling posts) ─────────
const ReelBand = () =>
<section className="lk-reelband sec-pink">
    <style>{`
      /* Section bgs go transparent so the global gradient shows through;
         the heavy gradients (paper / cream) get translucent overlays instead. */
      .lk-reelband{ padding:64px 0 72px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
      .lk-reelband .head{ text-align:center; max-width:none; margin:0 auto 48px; padding:0 56px; }
      .lk-reelband h2{ font-family:"Inter",system-ui; font-weight:900; font-size:clamp(20px,2.6vw,52px); line-height:1.05; letter-spacing:-.035em; margin:14px 0 14px; white-space:nowrap; }
      .lk-reelband h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent); letter-spacing:-.025em; }
      .lk-reelband .sub{ font-size:16px; color:var(--ink-2); line-height:1.55; max-width:none; white-space:nowrap; margin:0 auto; }
      .lk-reel{ padding:40px 0 20px; position:relative; }
      .lk-reel::before, .lk-reel::after{ content:""; position:absolute; top:0; bottom:0; width:140px; z-index:3; pointer-events:none; }
      .lk-reel::before{ left:0; background:linear-gradient(90deg, rgba(255,243,246,.95), transparent); }
      .lk-reel::after{ right:0; background:linear-gradient(-90deg, rgba(255,243,246,.95), transparent); }
      .lk-track{ display:flex; gap:24px; width:max-content; animation:lkScroll 60s linear infinite; padding:24px 24px 32px; }
      .lk-reel:hover .lk-track{ animation-play-state:paused; }
      @keyframes lkScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
      .lk-pcard{ flex:none; width:300px; background:#fff; border-radius:18px; border:1px solid var(--line); padding:18px; box-shadow:0 30px 60px -36px rgba(14,26,43,.28); display:flex; flex-direction:column; gap:12px; position:relative; }
      .lk-pcard.tilt-a{ transform:rotate(-2.4deg) translateY(8px); }
      .lk-pcard.tilt-b{ transform:rotate(1.8deg) translateY(-6px); }
      .lk-pcard.tilt-c{ transform:rotate(-1deg); }
      .lk-pcard.tilt-d{ transform:rotate(3deg) translateY(4px); }
      .lk-pcard .hd{ display:flex; gap:10px; align-items:center; }
      .lk-pcard .av{ width:36px; height:36px; border-radius:50%; flex:none; }
      .lk-pcard .nm{ font-size:13px; font-weight:600; letter-spacing:-.01em; }
      .lk-pcard .ti{ font-size:11px; color:var(--ink-3); margin-top:1px; }
      .lk-pcard .bdy{ font-size:13px; line-height:1.5; color:var(--ink-2); }
      .lk-pcard .bdy b{ color:var(--ink); font-weight:600; }
      .lk-pcard .media{ height:140px; border-radius:10px; background:linear-gradient(135deg,#f0d9c2,#c4612f); position:relative; overflow:hidden; }
      .lk-pcard .media.b{ background:linear-gradient(135deg,#dde4f0,#1f3a68); }
      .lk-pcard .media.dark{ background:var(--ink); }
      .lk-pcard .media .ch{ position:absolute; inset:auto 14px 14px; height:48px; }
      .lk-pcard .react{ display:flex; align-items:center; gap:6px; padding-top:10px; border-top:1px solid var(--line); }
      .lk-pcard .react .em{ display:inline-flex; align-items:center; }
      .lk-pcard .react .emi{ width:18px; height:18px; border-radius:50%; display:inline-block; border:1.5px solid #fff; margin-left:-5px; }
      .lk-pcard .react .emi:first-child{ margin-left:0; }
      .lk-pcard .react .emi.like{ background:#0a66c2; }
      .lk-pcard .react .emi.cel{ background:#6dae4f; }
      .lk-pcard .react .emi.lov{ background:#df704d; }
      .lk-pcard .react .ct{ font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
      .lk-pcard .react .ct b{ color:var(--ink); font-weight:600; }
      .lk-pcard .react .sp{ flex:1; }
      .lk-pcard .react .cm{ font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
      .lk-pcard .imp{ display:flex; align-items:baseline; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); padding-top:8px; border-top:1px dashed var(--accent-soft); }
      .lk-pcard .imp b{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:16px; letter-spacing:-.01em; text-transform:none; color:var(--ink); }
      .lk-pcard.blue .imp{ color:var(--blue); border-top-color:var(--blue-soft); }
      .lk-pcard .pop{ position:absolute; right:-8px; top:-12px; padding:5px 10px; border-radius:99px; background:var(--ink); color:#fff; font-size:11px; font-weight:500; box-shadow:0 8px 18px -8px rgba(14,26,43,.4); white-space:nowrap; animation:lkPop 3.6s ease-in-out infinite; }
      @keyframes lkPop{ 0%,18%{transform:translateY(8px) scale(.9); opacity:0} 25%,55%{transform:translateY(0) scale(1); opacity:1} 75%,100%{transform:translateY(-14px) scale(.95); opacity:0} }
    `}</style>
    <div className="head">
      <h2>Your LinkedIn doesn't grow from posting. It grows from <em>conversations.</em></h2>
      <p className="sub">Most founders post and disappear. Linkyro finds relevant posts, drafts thoughtful comments, helps you reply faster, and keeps you visible to the people who matter.</p>
    </div>
    <PostsReel />
  </section>;


const Spark = ({ color = '#c4612f', dark = false }) =>
<svg viewBox="0 0 200 48" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
    <path d="M 0 36 L 20 32 L 40 28 L 60 24 L 80 18 L 100 22 L 120 14 L 140 10 L 160 6 L 180 4 L 200 2" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    <path d="M 0 36 L 20 32 L 40 28 L 60 24 L 80 18 L 100 22 L 120 14 L 140 10 L 160 6 L 180 4 L 200 2 L 200 48 L 0 48 Z" fill={color} opacity={dark ? .35 : .18} />
  </svg>;


const Tick = ({ from, to, suffix = '', dur = 2400 }) => {
  const [v, setV] = React.useState(from);
  React.useEffect(() => {
    let raf, t0;
    const step = (ts) => {
      if (!t0) t0 = ts;
      const p = Math.min(1, (ts - t0) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      setV(Math.round(from + (to - from) * e));
      if (p < 1) raf = requestAnimationFrame(step);else
      {
        // hold then loop
        setTimeout(() => {t0 = null;setV(from);raf = requestAnimationFrame(step);}, 1400);
      }
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [from, to, dur]);
  return <b>{v.toLocaleString()}{suffix}</b>;
};

const PostsReel = () => {
  const cards = [
  { tilt: 'tilt-a', av: 'linear-gradient(135deg,#c4612f,#e8c8a8)', nm: 'Marisol Chen', ti: 'Founder · Plinth.io', body: <>The <b>unglamorous middle</b> of company-building is the whole job. Four things I'd tell month-two me…</>, mediaClass: '', likes: [3120, 4280], lift: '+612%', impTag: 'impressions, week 2', pop: '↑ 1,240 in 2 hrs' },
  { tilt: 'tilt-b', av: 'linear-gradient(135deg,#1f3a68,#3a5a98)', nm: 'Devon Park', ti: 'CEO · Embstack', body: <>Pipeline gap math <b>only stings</b> because attribution is mostly fiction. Curious what you'd measure…</>, mediaClass: 'b', blue: true, likes: [842, 1610], lift: '+418%', impTag: 'search appearances', pop: '· 2 new DMs' },
  { tilt: 'tilt-c', av: 'linear-gradient(135deg,#3a5a14,#7c8597)', nm: 'Anika Bose', ti: 'Founder · Kiln', body: <>I tried writing one post a day for thirty days. <b>Twenty-four</b> of them were ghostwritten. Here's how you can tell which six weren't.</>, mediaClass: 'dark', likes: [5210, 7480], lift: '+24×', impTag: 'profile views, 30d', pop: '· Featured in search' },
  { tilt: 'tilt-d', av: 'linear-gradient(135deg,#e08c5c,#f0d9c2)', nm: 'Iris Tanaka', ti: 'Founder · Linkyro', body: <>The cheapest growth lever a B2B founder ignores is their own LinkedIn. We benchmark it on day 0 and refund if it doesn't move.</>, mediaClass: '', likes: [1820, 3640], lift: '+3.4×', impTag: 'median lift, day-30' },
  { tilt: 'tilt-a', av: 'linear-gradient(135deg,#1f3a68,#9bb4d6)', nm: 'Felix Aramburu', ti: 'Editorial lead · Linkyro', body: <>We wrote 47 founder profiles this year. The ones that worked all <b>refused</b> three tropes. Thread.</>, mediaClass: 'b', blue: true, likes: [612, 1240], lift: '+92%', impTag: 'engagement rate', pop: '· 1 inbound ↗' },
  { tilt: 'tilt-c', av: 'linear-gradient(135deg,#7c8597,#3b4a5e)', nm: 'Vikram Rao', ti: 'VP Sales · Plinth', body: <>Hired our second AE off a LinkedIn DM that opened with a quote from <b>our own founder's</b> post. Recursion is a feature.</>, mediaClass: '', likes: [284, 980], lift: '+418', impTag: 'qualified DMs, mo' },
  { tilt: 'tilt-b', av: 'linear-gradient(135deg,#c4612f,#1f3a68)', nm: 'Priya Soren', ti: 'Engagement eng · Linkyro', body: <>We ship 100 targeted comments a day, by name, by ICP, by <b>thread relevance</b>. Reach is what happens after.</>, mediaClass: 'b', blue: true, likes: [1140, 2410], lift: '+2.1×', impTag: 'reply-back rate', pop: '↑ +28 followers' },
  { tilt: 'tilt-d', av: 'linear-gradient(135deg,#0e1a2b,#c4612f)', nm: 'Sara Khan', ti: 'CMO · ArcType', body: <>Day 0 my profile had <b>312 views</b>. Day 30 it had 9,840 and I'd stopped checking. The Friday receipts caught me up.</>, mediaClass: 'dark', likes: [3980, 6210], lift: '+31×', impTag: 'impressions lift' }];

  // duplicate for seamless loop
  const all = [...cards, ...cards];
  return (
    <div className="lk-reel">
      <div className="lk-track">
        {all.map((c, i) =>
        <div key={i} className={`lk-pcard ${c.tilt} ${c.blue ? 'blue' : ''}`}>
            <div className="hd">
              <div className="av" style={{ background: c.av }}></div>
              <div><div className="nm">{c.nm}</div><div className="ti">{c.ti}</div></div>
            </div>
            <div className="bdy">{c.body}</div>
            <div className={`media ${c.mediaClass || ''}`}>
              <div className="ch"><Spark color={c.blue ? '#9bb4d6' : '#fbf8f2'} dark={c.mediaClass === 'dark' || c.blue} /></div>
            </div>
            <div className="react">
              <span className="em">
                <span className="emi like"></span><span className="emi cel"></span><span className="emi lov"></span>
              </span>
              <span className="ct"><Tick from={c.likes[0]} to={c.likes[1]} dur={2200 + i % 4 * 400} /></span>
              <span className="sp"></span>
              <span className="cm"><Tick from={Math.floor(c.likes[0] / 40)} to={Math.floor(c.likes[1] / 30)} dur={2600} /> comments</span>
            </div>
            <div className="imp"><span>{c.impTag}</span><span style={{ marginLeft: 'auto' }}><b>{c.lift}</b></span></div>
            {c.pop && i < cards.length && <div className="pop" style={{ top: -12, animationDelay: `${i % 5 * -0.7}s` }}>{c.pop}</div>}
          </div>
        )}
      </div>
    </div>);

};

// ───────── ANIMATED SIGNAL VIZ ─────────
const SignalViz = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const cv = ref.current;if (!cv) return;
    const ctx = cv.getContext('2d');
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const resize = () => {
      const W = cv.clientWidth,H = cv.clientHeight;
      cv.width = W * dpr;cv.height = H * dpr;ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();window.addEventListener('resize', resize);
    let raf,t0 = performance.now();
    const rings = [0.32, 0.5, 0.68, 0.86, 1.04];
    const ringColor = (i) => i % 2 === 0 ? [196, 97, 47] : [31, 58, 104]; // alternate rust + deep blue
    const loop = () => {
      const W = cv.clientWidth,H = cv.clientHeight;
      const t = (performance.now() - t0) / 1000;
      ctx.clearRect(0, 0, W, H);
      const cx = W / 2,cy = H / 2;
      const baseR = Math.min(W, H) * 0.22;
      for (let i = 0; i < rings.length; i++) {
        const pulse = (t * 0.4 + i * 0.18) % 1;
        const r = baseR * (1 + pulse * 1.6);
        const alpha = (1 - pulse) * 0.35;
        const [cr, cg, cb] = ringColor(i);
        ctx.strokeStyle = `rgba(${cr},${cg},${cb},${alpha})`;
        ctx.lineWidth = 1.4;
        ctx.beginPath();ctx.arc(cx, cy, r, 0, Math.PI * 2);ctx.stroke();
      }
      for (let i = 0; i < rings.length; i++) {
        ctx.strokeStyle = 'rgba(14,26,43,.07)';ctx.lineWidth = 1;
        ctx.beginPath();ctx.arc(cx, cy, baseR * (0.6 + i * 0.42), 0, Math.PI * 2);ctx.stroke();
      }
      const grad = ctx.createRadialGradient(cx - 12, cy - 12, 8, cx, cy, baseR * 0.55);
      grad.addColorStop(0, '#e08c5c');grad.addColorStop(0.55, '#c4612f');grad.addColorStop(1, '#1f3a68');
      ctx.fillStyle = grad;ctx.beginPath();ctx.arc(cx, cy, baseR * 0.5, 0, Math.PI * 2);ctx.fill();
      ctx.fillStyle = '#fbf8f2';ctx.font = '600 36px Inter, system-ui';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillText('M', cx, cy + 2);
      raf = requestAnimationFrame(loop);
    };
    loop();
    return () => {cancelAnimationFrame(raf);window.removeEventListener('resize', resize);};
  }, []);
  return (
    <div className="lk-viz">
      <style>{`
        .lk-viz{ position:relative; aspect-ratio:1/1; max-height:560px; }
        .lk-viz canvas{ position:absolute; inset:0; width:100%; height:100%; }
        @keyframes lkFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
        .lk-orb{ position:absolute; background:var(--paper); border-radius:10px; padding:10px 12px; box-shadow:0 14px 30px -16px rgba(14,26,43,.22), 0 0 0 1px var(--line); display:flex; align-items:center; gap:10px; animation:lkFloat 5s ease-in-out infinite; }
        .lk-orb .av{ width:26px; height:26px; border-radius:50%; flex:none; }
        .lk-orb .t{ font-size:12px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
        .lk-orb .s{ font-size:10px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
      `}</style>
      <canvas ref={ref} />
      <div className="lk-orb" style={{ top: '8%', left: '4%', animationDelay: '0s' }}>
        <div className="av" style={{ background: 'linear-gradient(135deg,#c4612f,#e8c8a8)' }}></div>
        <div><div className="t">+412 impressions</div><div className="s">last 24h</div></div>
      </div>
      <div className="lk-orb" style={{ top: '4%', right: '4%', animationDelay: '-1.5s' }}>
        <div className="av" style={{ background: 'linear-gradient(135deg,#1f3a68,#3a5a98)' }}></div>
        <div><div className="t">Sara Khan · replied</div><div className="s">cmo · arctype</div></div>
      </div>
      <div className="lk-orb" style={{ bottom: '22%', left: '-2%', animationDelay: '-3s' }}>
        <div className="av" style={{ background: 'linear-gradient(135deg,#e08c5c,#f0d9c2)' }}></div>
        <div><div className="t">Featured in search</div><div className="s">"operator founders"</div></div>
      </div>
      <div className="lk-orb" style={{ bottom: '4%', right: '10%', animationDelay: '-2s' }}>
        <div className="av" style={{ background: 'linear-gradient(135deg,#1f3a68,#9bb4d6)' }}></div>
        <div><div className="t">+612% engagement</div><div className="s">week 2 receipt</div></div>
      </div>
      <div className="lk-orb" style={{ top: '42%', right: '-2%', animationDelay: '-4s' }}>
        <div className="av" style={{ background: 'linear-gradient(135deg,#7c8597,#3b4a5e)' }}></div>
        <div><div className="t">Vikram Rao · DM</div><div className="s">vp sales · plinth</div></div>
      </div>
    </div>);

};

// ───────── TRUST BAR ─────────
const TrustBar = () =>
<div className="lk-trust">
    <style>{`
      .lk-trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
      .lk-trust .row{ display:flex; align-items:center; gap:60px; padding:28px 0; }
      .lk-trust .lbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
      .lk-trust .stats{ display:flex; gap:56px; flex:1; justify-content:flex-end; }
      .lk-trust .stat .v{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:28px; letter-spacing:-.01em; }
      .lk-trust .stat .v em{ font-style:italic; color:var(--accent); }
      .lk-trust .stat .l{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }
    `}</style>
    <div className="lk-wrap row">
      <div className="lbl">Receipts across 47 founder engagements</div>
      <div className="stats">
        <div className="stat"><div className="v"><em>3.4×</em></div><div className="l">Median impressions lift</div></div>
        <div className="stat"><div className="v"><em>+612%</em></div><div className="l">Engagement rate</div></div>
        <div className="stat"><div className="v"><em>92%</em></div><div className="l">Renew next month</div></div>
        <div className="stat"><div className="v"><em>$0</em></div><div className="l">Refunds owed YTD</div></div>
      </div>
    </div>
  </div>;


// ───────── FEATURES (extension copilot) ─────────
const Features = () =>
<section id="features" className="lk-feat sec-mint">
    <style>{`
      .lk-feat{ padding:96px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
      .lk-feat .head{ max-width:none; margin:0 0 56px; }
      .lk-feat h2{ font-family:"Inter",system-ui; font-weight:900; font-size:clamp(22px,3.2vw,52px); line-height:1.05; letter-spacing:-.035em; margin:14px 0 16px; white-space:nowrap; }
      .lk-feat h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent); letter-spacing:-.025em; }
      .lk-feat .head p{ font-size:16px; color:var(--ink-2); line-height:1.6; max-width:none; margin:0; white-space:nowrap; }
      .lk-feat .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; align-items:start; }
      .lk-feat .card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px; display:flex; flex-direction:column; gap:18px; box-shadow:0 30px 60px -42px rgba(14,26,43,.3); }
      .lk-feat .num{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
      .lk-feat .ctitle{ font-family:"Inter",system-ui; font-weight:700; font-size:22px; letter-spacing:-.02em; margin:0; }
      .lk-feat .cdesc{ font-size:14px; color:var(--ink-2); line-height:1.6; margin:0; }
      .lk-feat .demo{ background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:18px; }

      .lk-feat .rel{ display:flex; align-items:center; gap:16px; }
      .lk-feat .donut{ width:64px; height:64px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--accent) 92%, var(--line-2) 0); }
      .lk-feat .donut span{ width:48px; height:48px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:var(--ink); }
      .lk-feat .rel .rt{ font-weight:700; font-size:15px; }
      .lk-feat .rel .rs{ font-size:13px; color:var(--ink-2); margin-top:2px; }

      .lk-feat .pills{ display:flex; gap:8px; flex-wrap:wrap; }
      .lk-feat .pill{ font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); }
      .lk-feat .pill.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
      .lk-feat .pill.blue{ background:var(--blue); border-color:var(--blue); color:#fff; }
      .lk-feat .reply{ font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

      .lk-feat .cmp{ display:flex; flex-direction:column; gap:10px; }
      .lk-feat .cmp .crow{ border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.5; }
      .lk-feat .cmp .crow.bot{ background:rgba(196,97,47,.06); border:1px solid var(--accent-soft); color:var(--ink-2); }
      .lk-feat .cmp .crow.you{ background:rgba(31,58,104,.06); border:1px solid var(--blue-soft); color:var(--ink); }
      .lk-feat .cmp .tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:6px; display:block; }
      .lk-feat .cmp .crow.bot .tag{ color:var(--accent); }
      .lk-feat .cmp .crow.you .tag{ color:var(--blue); }
    `}</style>
    <div className="lk-wrap">
      <div className="head">
        <div className="mono">— Inside the extension</div>
        <h2>A copilot that reads the room, <em>not just the post.</em></h2>
        <p>Linkyro lives right inside your LinkedIn feed. It scores what's worth your time, drafts a reply in your angle and length, and keeps every word sounding like you.</p>
      </div>
      <div className="grid">

        <div className="card">
          <div><div className="num">/ 01</div><h3 className="ctitle">See what matters</h3></div>
          <p className="cdesc">Every post gets a relevance score against your industry and audience — so you spend your taps where they actually move the needle.</p>
          <div className="demo">
            <div className="rel">
              <div className="donut"><span>92%</span></div>
              <div><div className="rt">High relevance</div><div className="rs">matches your audience</div></div>
            </div>
          </div>
        </div>

        <div className="card">
          <div><div className="num">/ 02</div><h3 className="ctitle">One tap, different angle</h3></div>
          <p className="cdesc">Agree, share a take, ask a question, or react. Pick the angle and Linkyro drafts a comment that fits it.</p>
          <div className="demo">
            <div className="pills"><span className="pill on">Agree</span><span className="pill">Share</span><span className="pill">Ask</span><span className="pill">React</span></div>
            <div className="reply">"Curious — how do you handle the feedback when the messy parts attract criticism instead of support?"</div>
          </div>
        </div>

        <div className="card">
          <div><div className="num">/ 03</div><h3 className="ctitle">Short or long, instantly</h3></div>
          <p className="cdesc">Need a one-liner or a thoughtful paragraph? Switch length in a tap and the draft rewrites itself.</p>
          <div className="demo">
            <div className="pills"><span className="pill">Short</span><span className="pill">Med</span><span className="pill blue">Full</span></div>
            <div className="reply">"Solid take. I've seen this pattern work especially well in early-stage teams where the founder sets the rhythm and the system scales the consistency across the org."</div>
          </div>
        </div>

        <div className="card">
          <div><div className="num">/ 04</div><h3 className="ctitle">Your voice, not a bot</h3></div>
          <p className="cdesc">Pro, casual, friendly, human — tuned to how you actually write. No "Great post!" filler, ever.</p>
          <div className="demo">
            <div className="cmp">
              <div className="crow bot"><span className="tag">Typical AI</span>"I completely agree with your insightful post! Keep sharing such great content! #Leadership #Growth"</div>
              <div className="crow you"><span className="tag">Linkyro</span>"Yeah this resonates. The systems part is easy — knowing when to break them and rebuild is the actual skill."</div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>;


// ───────── BEFORE / AFTER — profile screenshots ─────────
const BeforeAfter = () =>
<section id="receipts" className="lk-ba sec-yellow">
    <style>{`
      .lk-ba{ padding:96px 0; }
      .lk-ba .hd{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; gap:40px; }
      .lk-ba h3{ font-family:var(--serif); font-weight:300; font-size:64px; line-height:1; letter-spacing:-.03em; margin:14px 0 0; max-width:760px; }
      .lk-ba h3 em{ font-style:italic; color:var(--accent); }
      .lk-ba .hd .sub{ font-size:14px; color:var(--ink-2); max-width:320px; line-height:1.55; }
      .lk-ba .pair{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
      .lk-prof{ background:var(--paper); border-radius:18px; border:1px solid var(--line); overflow:hidden; position:relative; }
      .lk-prof .banner{ height:88px; background:linear-gradient(135deg,#c4c0b6,#7c8597); }
      .lk-prof.after .banner{ background:linear-gradient(135deg,#c4612f 0%,#e08c5c 40%,#0e1a2b 100%); }
      .lk-prof .body{ padding:0 28px 28px; }
      .lk-prof .av{ width:104px; height:104px; border-radius:50%; background:linear-gradient(135deg,#c4c0b6,#7c8597); margin-top:-52px; border:4px solid var(--paper); }
      .lk-prof.after .av{ background:linear-gradient(135deg,#c4612f,#0e1a2b); }
      .lk-prof .nm{ font-family:var(--serif); font-size:26px; font-weight:400; letter-spacing:-.01em; margin-top:16px; }
      .lk-prof .ti{ font-size:13.5px; color:var(--ink-2); margin-top:4px; line-height:1.45; }
      .lk-prof.after .ti{ font-weight:500; color:var(--ink); }
      .lk-prof .conn{ font-size:11.5px; color:var(--ink-3); margin-top:10px; font-family:var(--mono); letter-spacing:.06em; }
      .lk-prof .stat{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr 1fr; padding-top:18px; border-top:1px solid var(--line); }
      .lk-prof .stat .n{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:24px; }
      .lk-prof.after .stat .n{ color:var(--accent); }
      .lk-prof .stat .l{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }
      .lk-prof .baLbl{ display:inline-block; margin-top:18px; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; padding:5px 12px; border-radius:99px; border:1px solid var(--line-2); color:var(--ink-3); }
      .lk-prof.after .baLbl{ color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft); }

      .lk-prof .arrow{ position:absolute; top:50%; right:-22px; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; z-index:2; font-family:var(--serif); font-style:italic; font-weight:300; font-size:20px; }

      .lk-ba .more{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
      .lk-quote{ background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:24px; }
      .lk-quote .q{ font-family:var(--serif); font-weight:300; font-size:18px; line-height:1.4; letter-spacing:-.01em; color:var(--ink); margin-bottom:18px; }
      .lk-quote .q em{ font-style:italic; color:var(--accent); }
      .lk-quote .who{ display:flex; gap:10px; align-items:center; padding-top:16px; border-top:1px solid var(--line); }
      .lk-quote .av{ width:34px; height:34px; border-radius:50%; }
      .lk-quote .nm{ font-size:13px; font-weight:600; }
      .lk-quote .ro{ font-size:11px; color:var(--ink-3); margin-top:2px; }
    `}</style>
    <div className="lk-wrap">
      <div className="hd">
        <div>
          <div className="mono">— Real client · day 0 vs. day 30</div>
          <h3>What thirty days of <em>Linkyro</em> actually looks like.</h3>
        </div>
        <div className="sub">Pulled, unedited, from LinkedIn's own analytics. We open every engagement with a screenshot and close with one.</div>
      </div>

      <div className="pair">
        <div className="lk-prof">
          <div className="banner"></div>
          <div className="body">
            <div className="av"></div>
            <div className="nm">M. Chen</div>
            <div className="ti">Founder, building things at Plinth.io</div>
            <div className="conn">312 connections · open to work</div>
            <div className="stat">
              <div><div className="n">312</div><div className="l">Profile views</div></div>
              <div><div className="n">0.6%</div><div className="l">Engagement</div></div>
              <div><div className="n">14</div><div className="l">Search hits</div></div>
            </div>
            <span className="baLbl">Day 0 — Before</span>
          </div>
          <div className="arrow">→</div>
        </div>
        <div className="lk-prof after">
          <div className="banner"></div>
          <div className="body">
            <div className="av"></div>
            <div className="nm">Marisol Chen</div>
            <div className="ti">Operator-turned-founder · I write about the unglamorous middle of company-building. 4 posts/week.</div>
            <div className="conn">2,184 connections · 4,621 followers</div>
            <div className="stat">
              <div><div className="n">9,840</div><div className="l">Profile views</div></div>
              <div><div className="n">4.2%</div><div className="l">Engagement</div></div>
              <div><div className="n">418</div><div className="l">Search hits</div></div>
            </div>
            <span className="baLbl">Day 30 — After</span>
          </div>
        </div>
      </div>

      <div className="more">
        <div className="lk-quote">
          <div className="q">"Two qualified inbound DMs in week one. I'd written <em>twice</em> on LinkedIn in five years."</div>
          <div className="who"><div className="av" style={{ background: 'linear-gradient(135deg,#7c8597,#3b4a5e)' }}></div><div><div className="nm">Devon Park</div><div className="ro">CEO · Embstack — Series A</div></div></div>
        </div>
        <div className="lk-quote">
          <div className="q">"They write in my voice better than I do at 11pm. <em>That's the whole product.</em>"</div>
          <div className="who"><div className="av" style={{ background: 'linear-gradient(135deg,#c4612f,#e8c8a8)' }}></div><div><div className="nm">Anika Bose</div><div className="ro">Founder · Kiln — pre-seed</div></div></div>
        </div>
        <div className="lk-quote">
          <div className="q">"24× impressions in a month. I had to <em>turn off</em> connection notifications."</div>
          <div className="who"><div className="av" style={{ background: 'linear-gradient(135deg,#3a5a14,#7c8597)' }}></div><div><div className="nm">Marisol Chen</div><div className="ro">Founder · Plinth.io — bootstrapped</div></div></div>
        </div>
      </div>

    </div>
  </section>;


// ───────── PRICING ─────────
const Pricing = () =>
<section id="pricing" className="lk-pr">
    <style>{`
      .lk-pr{ padding:130px 0; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
      .lk-pr::before{ content:""; position:absolute; top:-200px; right:-120px; width:620px; height:620px; border-radius:50%; background:radial-gradient(closest-side, rgba(196,97,47,.4), transparent 70%); pointer-events:none; }
      .lk-pr .hd{ text-align:center; margin-bottom:64px; }
      .lk-pr h3{ font-family:var(--serif); font-weight:300; font-size:64px; line-height:1; letter-spacing:-.03em; margin:14px 0 18px; }
      .lk-pr h3 em{ font-style:italic; color:var(--accent); }
      .lk-pr .lede{ font-size:17px; color:var(--ink-2); max-width:560px; margin:0 auto; line-height:1.55; }
      .lk-pr .card{ position:relative; }
      .lk-pr .row1{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; }
      .lk-pr .label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-light); }
      .lk-pr .price{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:128px; letter-spacing:-.04em; line-height:1; margin:14px 0 6px; }
      .lk-pr .price b{ font-style:normal; font-weight:400; }
      .lk-pr .perm{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#a6a097; }
      .lk-pr .right{ flex:none; width:460px; max-width:42%; }
      .lk-pr .guar{ background:rgba(232,200,168,.1); border:1px solid rgba(232,200,168,.3); border-radius:14px; padding:22px 24px; }
      .lk-pr .guar .t{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:22px; color:var(--accent-light); letter-spacing:-.01em; margin-bottom:4px; }
      .lk-pr .guar .s{ font-size:13px; color:#c8c2b6; line-height:1.5; }
      .lk-pr .incl{ margin-top:48px; padding-top:40px; border-top:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:repeat(3,1fr); gap:24px 48px; }
      .lk-pr .incl .li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#c8c2b6; }
      .lk-pr .incl .li .ck{ flex:none; width:18px; height:18px; border-radius:50%; background:var(--accent); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:10px; margin-top:1px; }
      .lk-pr .incl .li b{ font-weight:500; color:var(--paper); display:block; }
      .lk-pr .ctas{ margin-top:40px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
      .lk-pr .btnL{ padding:14px 22px; border-radius:10px; background:var(--paper); color:var(--ink); font-size:14px; font-weight:500; }
      .lk-pr .slots{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-light); margin-left:auto; }
      .lk-pr .slots .d{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:8px; box-shadow:0 0 0 4px rgba(196,97,47,.2); }
    `}</style>
    <div className="lk-wrap">
      <div className="card">
        <div className="row1">
          <div>
            <div className="label">Flat fee</div>
            <div className="price"><b>$</b>500</div>
            <div className="perm">Per month · per founder</div>
          </div>
          <div className="right">
            <div className="guar">
              <div className="t">Grow or full refund.</div>
              <div className="s">If your impressions don't go up over our day-0 benchmark by day 30, we send every dollar back. We've owed $0 in refunds across 47 engagements.</div>
            </div>
          </div>
        </div>
        <div className="incl">
          <div className="li"><span className="ck">✓</span><span><b>1 voice-cloning session</b>Senior strategist, 20–30 minutes</span></div>
          <div className="li"><span className="ck">✓</span><span><b>20 posts a month</b>Drafted in your voice, approved by you</span></div>
          <div className="li"><span className="ck">✓</span><span><b>100 targeted comments/day</b>On accounts in your ICP, ghostwritten</span></div>
          <div className="li"><span className="ck">✓</span><span><b>Weekly receipt</b>Two-page report every Friday</span></div>
          <div className="li"><span className="ck">✓</span><span><b>Inbound triage</b>We sort DMs, you reply to the ones that matter</span></div>
          <div className="li"><span className="ck">✓</span><span><b>One Slack channel</b>Same three operators, every day</span></div>
        </div>
        <div className="ctas">
          <a className="btnL">Claim a slot →</a>
          <a href={BOOKING_URL} style={{ color: '#c8c2b6', fontSize: 13 }}>Book a 15-minute call first ↗</a>
          <span className="slots"><span className="d"></span>2 slots left · November</span>
        </div>
      </div>
    </div>
  </section>;


// ───────── FAQ ─────────
const Faq = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
  { q: "Who actually writes the posts?", a: "Our editorial lead Felix drafts the first month of your voice. After that, our in-house model (trained on your approved drafts) writes a first pass, and a human edits every single one before you see it. Nothing reaches you, or your audience, unread." },
  { q: "Is this a ghostwriter, an AI tool, or an agency?", a: "All three, in that order. You hire three named operators. The AI is internal scaffolding — never customer-facing. We don't sell prompts or seats." },
  { q: "What does \"grow or full refund\" actually mean?", a: "We snapshot your LinkedIn analytics on day 0 — impressions, engagement, search appearances, follower velocity. If on day 30 the impressions metric isn't higher, we refund the full $500. No clauses, no \"engagement-adjusted\" math. We've paid out $0 in 47 engagements." },
  { q: "Will it sound like me, or like every AI-written post on LinkedIn?", a: "It's our entire business not to. We do a 20-minute call, ingest your last 5 years of writing (Twitter threads, blog posts, voice memos — whatever exists), and run a calibration round. The first week is intentionally over-drafted so you can reject voice mismatches before we lock the model." },
  { q: "How much of my time does this take?", a: "Ten minutes a morning to approve the queue. Forty minutes once a week for the receipt review. That's it. Founders who treat us like infrastructure spend less time on LinkedIn than they did before." },
  { q: "What if I have a bad month — quiet launch, family thing, vacation?", a: "We have a \"thin month\" mode. You pay the flat fee, we ship at half-cadence, the 30-day clock pauses. We'd rather you renew at month 3 than burn out at month 1." }];

  return (
    <section id="faq" className="lk-faq sec-lavender">
      <style>{`
        .lk-faq{ padding:140px 0; }
        .lk-faq .grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:start; }
        .lk-faq h3{ font-family:var(--serif); font-weight:300; font-size:56px; line-height:1; letter-spacing:-.03em; margin:14px 0 0; }
        .lk-faq h3 em{ font-style:italic; color:var(--accent); }
        .lk-faq .ctc{ margin-top:32px; font-size:14px; color:var(--ink-2); line-height:1.55; max-width:300px; }
        .lk-faq .ctc a{ color:var(--accent); text-decoration:underline; }
        .lk-faq .list{ border-top:1px solid var(--line-2); }
        .lk-faq .it{ border-bottom:1px solid var(--line-2); }
        .lk-faq .it button{ width:100%; text-align:left; background:transparent; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; font-family:inherit; }
        .lk-faq .it .q{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:22px; letter-spacing:-.01em; color:var(--ink); }
        .lk-faq .it .pl{ flex:none; font-family:var(--serif); font-style:italic; font-weight:300; font-size:28px; color:var(--accent); }
        .lk-faq .it.open .pl{ transform:rotate(45deg); }
        .lk-faq .it .pl{ transition:transform .25s; }
        .lk-faq .it .a{ overflow:hidden; max-height:0; transition:max-height .35s, padding .25s; font-size:15px; color:var(--ink-2); line-height:1.6; padding:0 80px 0 0; }
        .lk-faq .it.open .a{ max-height:300px; padding:0 80px 28px 0; }
      `}</style>
      <div className="lk-wrap grid">
        <div>
          <div className="mono">— Common questions</div>
          <h3>Things we get<br />asked <em>before</em><br />day one.</h3>
          <p className="ctc">Still on the fence? <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> — that's a real inbox, replied to by the team, usually inside three hours.</p>
        </div>
        <div className="list">
          {items.map((it, i) =>
          <div key={i} className={`it ${open === i ? 'open' : ''}`}>
              <button onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="q">{it.q}</span><span className="pl">+</span>
              </button>
              <div className="a">{it.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ───────── FOOTER ─────────
const Footer = () =>
<footer className="lk-ft">
    <style>{`
      .lk-ft{ background:var(--ink); color:var(--paper); padding:120px 0 56px; position:relative; overflow:hidden; }
      .lk-ft::before{ content:""; position:absolute; inset:auto -200px -200px auto; width:600px; height:600px; border-radius:50%; background:radial-gradient(closest-side, rgba(232,200,168,.15), transparent 70%); }
      .lk-ft .cta{ display:grid; grid-template-columns:1.4fr 1fr; gap:80px; align-items:end; margin-bottom:96px; position:relative; }
      .lk-ft h4{ font-family:var(--serif); font-weight:300; font-size:88px; line-height:.96; letter-spacing:-.035em; margin:18px 0 0; }
      .lk-ft h4 em{ font-style:italic; color:var(--accent-light); }
      .lk-ft .mono.lt{ color:var(--accent-light); }
      .lk-ft .rt{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
      .lk-ft .rt a.big{ padding:16px 24px; background:var(--paper); color:var(--ink); border-radius:10px; font-weight:500; font-size:15px; display:inline-flex; align-items:center; gap:10px; }
      .lk-ft .rt .note{ font-size:12.5px; color:#a6a097; max-width:340px; line-height:1.5; }
      .lk-ft .bot{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; padding-top:48px; border-top:1px solid rgba(255,255,255,.1); }
      .lk-ft .brand{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:32px; letter-spacing:-.02em; margin-bottom:14px; }
      .lk-ft .brand b{ font-style:normal; font-weight:500; }
      .lk-ft .desc{ font-size:13.5px; color:#a6a097; line-height:1.55; max-width:280px; }
      .lk-ft .col h6{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-light); margin:0 0 14px; font-weight:500; }
      .lk-ft .col a{ display:block; font-size:14px; color:#c8c2b6; padding:5px 0; }
      .lk-ft .col a:hover{ color:var(--paper); }
      .lk-ft .legal{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#7f7a72; font-family:var(--mono); letter-spacing:.08em; }
    `}</style>
    <div className="lk-wrap">
      <div className="cta">
        <div>
          <div className="mono lt">— Take a slot</div>
          <h4>Hand us your<br />LinkedIn for<br /><em>thirty days.</em></h4>
        </div>
        <div className="rt">
          <a className="big" href={BOOKING_URL}>Claim a slot · $500 →</a>
          <div className="note">Onboarding starts the Monday after you book — voice-clone call inside 48 hours.</div>
        </div>
      </div>
      <div className="bot">
        <div>
          <div className="brand">Linky<b>ro</b></div>
          <div className="desc">Done-for-you LinkedIn for founders who'd rather build. Three operators. Flat $500/month. Grow or full refund.</div>
        </div>
        <div className="col">
          <h6>Product</h6>
          <a href="#receipts">Receipts</a><a href="#pricing">Pricing</a>
        </div>
        <div className="col">
          <h6>Company</h6>
          <a href="#team">The team</a><a href="#method">Manifesto</a><a href={BOOKING_URL}>Hiring</a><a href={`mailto:${SUPPORT_EMAIL}`}>Press kit</a>
        </div>
        <div className="col">
          <h6>Get in touch</h6>
          <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a><a href={BOOKING_URL}>Book a call</a><a href={X_URL} target="_blank" rel="noreferrer">X</a><a href={LINKEDIN_URL} target="_blank" rel="noreferrer">LinkedIn ↗</a>
        </div>
      </div>
      <div className="legal">
        <div>© 2026 Linkyro Co · Made in Brooklyn &amp; Lisbon</div>
        <div>Not affiliated with LinkedIn Corp.</div>
      </div>
    </div>
  </footer>;


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