// Direction E: "Welcome" — refined synthesis
// Warm + welcoming for SMBs. Cream canvas, ink type, terracotta accent.
// Big editorial serif headlines, conversational copy, gentle motion.
// Keeps the q3 partnership badge, "operating system" thesis, and the
// preferred long-form copy. Not techy — feels like a boutique partner.

const Welcome = () => {
  const [quizStep, setQuizStep] = React.useState(0);
  const [quizAnswers, setQuizAnswers] = React.useState({});
  const [chatInput, setChatInput] = React.useState('');
  const [chatMessages, setChatMessages] = React.useState([
    { role: 'bot', text: "Hi — I'm Levi, an AI trained on how we work. Ask me anything about partnering with us." },
  ]);
  const [calc, setCalc] = React.useState({ team: 35, hours: 8, wage: 45 });
  const [t, setT] = React.useState(0);
  const heroRef = React.useRef(null);
  const [mouse, setMouse] = React.useState({ x: 0.5, y: 0.4 });

  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  const annual = Math.round(calc.team * calc.hours * calc.wage * 50 * 0.6);
  const [displayNum, setDisplayNum] = React.useState(annual);
  React.useEffect(() => {
    let raf; const start = performance.now(); const from = displayNum; const dur = 350;
    const step = (now) => {
      const p = Math.min(1, (now - start) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      setDisplayNum(Math.round(from + (annual - from) * e));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  // eslint-disable-next-line
  }, [annual]);

  const sendChat = async () => {
    if (!chatInput.trim()) return;
    const q = chatInput.trim();
    setChatInput('');
    setChatMessages(m => [...m, { role: 'user', text: q }, { role: 'bot', text: '…', pending: true }]);
    try {
      const reply = await window.claude.complete(
        `You are Levi, friendly voice for Leviyet — an AI-powered growth partner for SMBs (10–100 employees). We help find the corners of a business where AI pays off, then build/ship/stay invested. Services: AI audits, custom agents, RAG, automation, AI marketing tools, paid ads, SEO, web. Warm, conversational, no jargon. 2-3 sentences. User: "${q}"`
      );
      setChatMessages(m => m.filter(x => !x.pending).concat({ role: 'bot', text: reply }));
    } catch {
      setChatMessages(m => m.filter(x => !x.pending).concat({ role: 'bot', text: "Let's chat directly — book a call below." }));
    }
  };

  const onMouseMove = (e) => {
    const r = heroRef.current?.getBoundingClientRect();
    if (!r) return;
    setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
  };

  // Gentle flowing line under hero
  const flowPath = React.useMemo(() => {
    const w = 1440, h = 120, pts = [];
    for (let i = 0; i <= 60; i++) {
      const x = (i / 60) * w;
      const y = h/2 + Math.sin(i * 0.18 + t * 0.9) * 18 + Math.sin(i * 0.42 + t * 1.4) * 6;
      pts.push([x, y]);
    }
    return 'M ' + pts.map(p => p.join(' ')).join(' L ');
  }, [t]);

  const services = [
    { n: '01', t: 'AI Opportunity Audit', d: "Two weeks shadowing your team. We learn how the business actually runs, then point at the corners where AI pays off most." },
    { n: '02', t: 'Custom Agents & Automations', d: 'Internal copilots, customer-facing assistants, automated workflows. Built into the tools you already use.' },
    { n: '03', t: 'AI-Powered Marketing', d: 'Content engines, smarter SEO, ad creative that compounds. Built once, your team runs forever.' },
    { n: '04', t: 'Web Design & Development', d: "Sites that load fast and convert. WordPress when you need to edit it yourself, custom when you don't." },
    { n: '05', t: 'Paid Ads & SEO', d: 'Google, Meta, organic. Same AI tools we build for clients, used on our own work first.' },
    { n: '06', t: 'Training & Enablement', d: "After we ship, your team needs to live with it. We make sure the system actually gets used." },
  ];

  const quizQs = [
    { q: 'How big is your team?', opts: ['1–10', '10–50', '50–100', '100+'] },
    { q: "Where's the time bleeding?", opts: ['Customer support', 'Internal ops', 'Content & marketing', 'Reporting & data'] },
    { q: "Tried AI tools before?", opts: ['Just ChatGPT', 'A few SaaS tools', 'Built something custom', 'Not yet'] },
  ];
  const showResult = quizStep >= 3;

  const css = `
    .we { font-family: 'Inter', system-ui, sans-serif; background: #f4efe6; color: #1a1612; line-height: 1.5; -webkit-font-smoothing: antialiased; }
    .we .serif { font-family: 'Instrument Serif', 'Georgia', serif; }
    .we .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

    .we-nav { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 22px 56px; background: rgba(244,239,230,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(26,22,18,0.08); }
    .we-logo { display: flex; align-items: center; gap: 10px; font-family: 'Instrument Serif', serif; font-size: 30px; font-style: italic; letter-spacing: -0.02em; }
    .we-logo-mark { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffb89a, #c8542a 70%); position: relative; }
    .we-logo-mark::after { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(200,84,42,0.3); border-radius: 50%; animation: weorbit 4s linear infinite; }
    @keyframes weorbit { to { transform: rotate(360deg); } }
    .we-navlinks { display: flex; gap: 32px; font-size: 14px; }
    .we-navlinks a { color: rgba(26,22,18,0.7); text-decoration: none; position: relative; }
    .we-navlinks a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #c8542a; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(.7,0,.3,1); }
    .we-navlinks a:hover { color: #1a1612; }
    .we-navlinks a:hover::after { transform: scaleX(1); }
    .we-cta { font-size: 14px; padding: 10px 18px; background: #1a1612; color: #f4efe6; border-radius: 999px; border: none; cursor: pointer; font-weight: 500; transition: transform 0.2s, background 0.2s; }
    .we-cta:hover { transform: translateY(-2px); background: #c8542a; }

    .we-hero { position: relative; padding: 80px 56px 60px; max-width: 1400px; margin: 0 auto; min-height: 720px; }
    .we-hero-blob { position: absolute; pointer-events: none; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(232,167,127,0.45) 0%, rgba(200,84,42,0.12) 30%, transparent 65%); filter: blur(60px); transition: transform 0.5s cubic-bezier(.2,.8,.3,1); mix-blend-mode: multiply; }

    .we-status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; background: rgba(255,255,255,0.7); border: 1px solid rgba(26,22,18,0.1); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #4a3f33; margin-bottom: 36px; position: relative; }
    .we-status-dot { width: 7px; height: 7px; background: #c8542a; border-radius: 50%; box-shadow: 0 0 0 4px rgba(200,84,42,0.18); animation: weheart 2s ease-in-out infinite; }
    @keyframes weheart { 0%,100% { box-shadow: 0 0 0 4px rgba(200,84,42,0.18); } 50% { box-shadow: 0 0 0 7px rgba(200,84,42,0.05); } }

    .we-h1 { font-family: 'Instrument Serif', serif; font-size: 144px; line-height: 0.95; letter-spacing: -0.025em; font-weight: 400; margin: 0 0 36px; max-width: 1280px; position: relative; }
    .we-h1 em { color: #c8542a; font-style: italic; position: relative; display: inline-block; }
    .we-h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.06em; background: #c8542a; opacity: 0.35; transform-origin: left; animation: weunder 1.4s ease-out forwards 0.4s; transform: scaleX(0); }
    @keyframes weunder { to { transform: scaleX(1); } }
    .we-sub { font-family: 'Inter', sans-serif; font-size: 22px; line-height: 1.5; color: #4a3f33; max-width: 720px; margin: 0 0 40px; position: relative; }
    .we-herobtns { display: flex; gap: 14px; align-items: center; position: relative; }
    .we-btn-pri { font-family: 'Inter', sans-serif; font-size: 15px; padding: 16px 26px; background: #1a1612; color: #f4efe6; border-radius: 999px; border: none; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s cubic-bezier(.2,.8,.3,1); position: relative; overflow: hidden; }
    .we-btn-pri::before { content: ''; position: absolute; inset: 0; background: #c8542a; transform: translateY(100%); transition: transform 0.35s cubic-bezier(.7,0,.3,1); }
    .we-btn-pri > * { position: relative; }
    .we-btn-pri:hover::before { transform: translateY(0); }
    .we-btn-pri:hover { transform: translateY(-2px); }
    .we-btn-pri .arrow { display: inline-block; transition: transform 0.3s; }
    .we-btn-pri:hover .arrow { transform: translateX(4px); }
    .we-btn-sec { font-family: 'Inter', sans-serif; font-size: 15px; padding: 16px 24px; background: transparent; color: #1a1612; border-radius: 999px; border: 1px solid rgba(26,22,18,0.2); cursor: pointer; transition: all 0.2s; }
    .we-btn-sec:hover { background: rgba(26,22,18,0.04); border-color: rgba(26,22,18,0.4); }

    .we-flow { width: 100%; height: 120px; display: block; margin-top: 48px; }

    .we-marquee-wrap { padding: 26px 0; border-top: 1px solid rgba(26,22,18,0.1); border-bottom: 1px solid rgba(26,22,18,0.1); overflow: hidden; background: #ede5d6; }
    .we-marquee { display: flex; gap: 56px; white-space: nowrap; animation: wescroll 50s linear infinite; font-family: 'Instrument Serif', serif; font-size: 32px; font-style: italic; }
    .we-marquee-block { display: inline-flex; align-items: center; gap: 56px; }
    .we-marquee-block span:nth-child(odd) { color: #1a1612; }
    .we-marquee-block span:nth-child(even) { color: #c8542a; font-style: normal; font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; }
    @keyframes wescroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    .we-section { padding: 130px 56px; max-width: 1400px; margin: 0 auto; position: relative; }
    .we-shead { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #c8542a; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 28px; display: flex; align-items: center; gap: 14px; }
    .we-shead-line { width: 32px; height: 1px; background: #c8542a; }
    .we-stitle { font-family: 'Instrument Serif', serif; font-size: 76px; line-height: 1; letter-spacing: -0.02em; font-weight: 400; margin: 0 0 80px; max-width: 1100px; }
    .we-stitle em { color: #c8542a; font-style: italic; }

    .we-thesis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(26,22,18,0.12); }
    .we-tcard { padding: 48px 36px 48px 0; border-right: 1px solid rgba(26,22,18,0.12); position: relative; transition: padding 0.35s; }
    .we-tcard:nth-child(2) { padding-left: 36px; }
    .we-tcard:nth-child(3) { padding-left: 36px; border-right: 0; }
    .we-tcard-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c8542a; letter-spacing: 0.15em; margin-bottom: 80px; }
    .we-tcard-title { font-family: 'Instrument Serif', serif; font-size: 32px; font-weight: 400; letter-spacing: -0.015em; margin: 0 0 14px; line-height: 1.05; }
    .we-tcard-desc { font-size: 15px; line-height: 1.6; color: #4a3f33; }

    .we-svc-list { border-top: 1px solid rgba(26,22,18,0.12); }
    .we-svc-row { display: grid; grid-template-columns: 80px 1.4fr 1.5fr 50px; gap: 32px; padding: 32px 16px; border-bottom: 1px solid rgba(26,22,18,0.12); align-items: center; cursor: pointer; transition: padding 0.3s; position: relative; overflow: hidden; }
    .we-svc-row::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(200,84,42,0.06), transparent 70%); transform: translateX(-100%); transition: transform 0.5s cubic-bezier(.2,.8,.3,1); }
    .we-svc-row:hover::before { transform: translateX(0); }
    .we-svc-row:hover { padding-left: 32px; }
    .we-svc-row:hover .we-svc-arrow { transform: translateX(8px); color: #c8542a; }
    .we-svc-row:hover .we-svc-title { color: #c8542a; }
    .we-svc-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #c8542a; letter-spacing: 0.1em; position: relative; }
    .we-svc-title { font-family: 'Instrument Serif', serif; font-size: 36px; font-weight: 400; letter-spacing: -0.02em; transition: color 0.3s; position: relative; }
    .we-svc-desc { font-size: 14px; line-height: 1.55; color: #4a3f33; position: relative; }
    .we-svc-arrow { font-size: 24px; color: rgba(26,22,18,0.3); transition: all 0.3s; text-align: right; position: relative; font-family: 'Instrument Serif', serif; font-style: italic; }

    .we-tools { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
    .we-tool { background: #fff; border: 1px solid rgba(26,22,18,0.1); border-radius: 18px; padding: 28px; min-height: 500px; display: flex; flex-direction: column; position: relative; transition: transform 0.3s, box-shadow 0.3s; }
    .we-tool:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(26,22,18,0.06); }
    .we-tool-tag { position: absolute; top: -1px; left: 28px; padding: 5px 14px; background: #c8542a; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; border-radius: 0 0 8px 8px; text-transform: uppercase; }
    .we-tool-title { font-family: 'Instrument Serif', serif; font-size: 28px; font-weight: 400; letter-spacing: -0.015em; margin: 32px 0 4px; line-height: 1.05; }
    .we-tool-title em { font-style: italic; color: #c8542a; }
    .we-tool-sub { font-size: 13px; color: #6b5d4d; margin-bottom: 24px; }

    .we-chat-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 320px; padding-right: 4px; }
    .we-chat-msg { font-size: 13px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; max-width: 90%; animation: wefadein 0.3s ease-out; }
    @keyframes wefadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    .we-chat-msg.bot { background: #f4efe6; color: #1a1612; align-self: flex-start; }
    .we-chat-msg.user { background: #1a1612; color: #f4efe6; align-self: flex-end; }
    .we-chat-input { display: flex; gap: 6px; }
    .we-chat-input input { flex: 1; background: #f4efe6; border: 1px solid rgba(26,22,18,0.1); border-radius: 12px; padding: 10px 14px; color: #1a1612; font-family: 'Inter', sans-serif; font-size: 13px; outline: none; transition: border-color 0.2s; }
    .we-chat-input input:focus { border-color: #c8542a; }
    .we-chat-input button { background: #c8542a; color: #fff; border: none; border-radius: 12px; padding: 0 16px; cursor: pointer; font-weight: 500; font-size: 13px; }

    .we-quiz-q { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b5d4d; letter-spacing: 0.1em; margin-bottom: 12px; }
    .we-quiz-q-text { font-family: 'Instrument Serif', serif; font-size: 22px; line-height: 1.2; margin-bottom: 20px; min-height: 56px; }
    .we-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
    .we-quiz-opt { font-family: 'Inter', sans-serif; font-size: 14px; padding: 12px 14px; background: #f4efe6; border: 1px solid rgba(26,22,18,0.1); border-radius: 12px; cursor: pointer; text-align: left; transition: all 0.2s cubic-bezier(.2,.8,.3,1); color: #1a1612; }
    .we-quiz-opt:hover { background: #1a1612; color: #f4efe6; border-color: #1a1612; transform: translateX(4px); }
    .we-quiz-progress { display: flex; gap: 4px; margin-top: auto; padding-top: 16px; }
    .we-quiz-dot { flex: 1; height: 3px; background: rgba(26,22,18,0.1); border-radius: 2px; transition: background 0.3s; }
    .we-quiz-dot.active { background: #c8542a; }

    .we-calc-row { display: flex; justify-content: space-between; font-size: 12px; color: #6b5d4d; margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; }
    .we-calc-row span:last-child { color: #1a1612; }
    .we-calc-slider { width: 100%; appearance: none; height: 2px; background: rgba(26,22,18,0.1); border-radius: 2px; margin-bottom: 18px; }
    .we-calc-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #c8542a; cursor: pointer; transition: transform 0.15s; box-shadow: 0 0 0 3px rgba(200,84,42,0.15); }
    .we-calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
    .we-calc-result { margin-top: auto; padding-top: 20px; border-top: 1px dashed rgba(26,22,18,0.15); }
    .we-calc-num { font-family: 'Instrument Serif', serif; font-size: 56px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: #c8542a; }
    .we-calc-num em { font-style: italic; }

    .we-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(26,22,18,0.12); border-bottom: 1px solid rgba(26,22,18,0.12); }
    .we-step { padding: 40px 32px 40px 24px; border-right: 1px solid rgba(26,22,18,0.12); display: flex; flex-direction: column; min-height: 320px; position: relative; }
    .we-step:last-child { border-right: 0; }
    .we-step-orb { width: 56px; height: 56px; border-radius: 50%; background: rgba(200,84,42,0.1); border: 1px solid rgba(200,84,42,0.35); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #c8542a; margin-bottom: 28px; position: relative; }
    .we-step-orb::before { content: ''; position: absolute; inset: -8px; border: 1px solid rgba(200,84,42,0.25); border-radius: 50%; animation: wepulse 2.4s ease-out infinite; }
    @keyframes wepulse { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
    .we-step-title { font-family: 'Instrument Serif', serif; font-size: 32px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 12px; }
    .we-step-desc { font-size: 14px; line-height: 1.6; color: #4a3f33; margin-top: auto; }

    .we-ctasection { padding: 100px 56px 0; max-width: 1400px; margin: 0 auto; }
    .we-cta-card { background: #1a1612; color: #f4efe6; border-radius: 24px; padding: 100px 64px; position: relative; overflow: hidden; }
    .we-cta-card::before { content: ''; position: absolute; top: -300px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(232,167,127,0.25) 0%, transparent 70%); border-radius: 50%; animation: wefloat 12s ease-in-out infinite; }
    @keyframes wefloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px, 40px); } }
    .we-cta-h { font-family: 'Instrument Serif', serif; font-size: 96px; line-height: 0.96; letter-spacing: -0.025em; font-weight: 400; margin: 0 0 24px; max-width: 1000px; position: relative; }
    .we-cta-h em { font-style: italic; color: #e8a77f; }
    .we-cta-p { font-size: 18px; line-height: 1.55; max-width: 540px; margin: 0 0 40px; color: rgba(244,239,230,0.7); position: relative; }
    .we-cta-btn { font-family: 'Inter', sans-serif; font-size: 16px; padding: 18px 32px; background: #e8a77f; color: #1a1612; border-radius: 999px; border: none; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; position: relative; transition: transform 0.3s, background 0.3s; }
    .we-cta-btn:hover { transform: translateY(-3px); background: #f4efe6; }

    .we-foot { padding: 80px 56px 32px; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; border-top: 1px solid rgba(26,22,18,0.12); margin-top: 100px; }
    .we-foot-mark { font-family: 'Instrument Serif', serif; font-size: 88px; font-weight: 400; letter-spacing: -0.025em; line-height: 0.9; }
    .we-foot-mark em { color: #c8542a; font-style: italic; }
    .we-foot-tag { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6b5d4d; margin-top: 16px; }
    .we-foot-col-h { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 16px; }
    .we-foot-col a { display: block; color: #1a1612; text-decoration: none; font-size: 15px; padding: 6px 0; transition: color 0.2s, transform 0.2s; }
    .we-foot-col a:hover { color: #c8542a; transform: translateX(4px); }
    .we-foot-bot { padding: 24px 56px; border-top: 1px solid rgba(26,22,18,0.12); display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b5d4d; max-width: 1400px; margin: 0 auto; }

    /* ---------- TABLET ---------- */
    @media (max-width: 1024px) {
      .we-nav { padding: 18px 32px; }
      .we-navlinks { gap: 22px; font-size: 13px; }
      .we-hero { padding: 56px 32px 48px; min-height: auto; }
      .we-hero-blob { width: 480px; height: 480px; filter: blur(48px); }
      .we-h1 { font-size: 96px; }
      .we-sub { font-size: 19px; }
      .we-status { margin-bottom: 28px; }
      .we-marquee { font-size: 24px; gap: 40px; }
      .we-marquee-block { gap: 40px; }
      .we-section { padding: 80px 32px; }
      .we-stitle { font-size: 56px; margin-bottom: 56px; }
      .we-thesis { grid-template-columns: 1fr; }
      .we-tcard { padding: 36px 0; border-right: 0; border-bottom: 1px solid rgba(26,22,18,0.12); }
      .we-tcard:nth-child(2), .we-tcard:nth-child(3) { padding-left: 0; }
      .we-tcard:last-child { border-bottom: 0; }
      .we-tcard-num { margin-bottom: 36px; }
      .we-svc-row { grid-template-columns: 60px 1fr 1.2fr 40px; gap: 24px; padding: 28px 12px; }
      .we-svc-title { font-size: 28px; }
      .we-tools { grid-template-columns: 1fr 1fr; gap: 14px; }
      .we-tool:first-child { grid-column: 1 / -1; min-height: auto; }
      .we-tool { padding: 24px; min-height: 460px; }
      .we-process { grid-template-columns: repeat(2, 1fr); }
      .we-step { padding: 36px 24px; min-height: 280px; }
      .we-step:nth-child(2) { border-right: 0; }
      .we-step:nth-child(1), .we-step:nth-child(2) { border-bottom: 1px solid rgba(26,22,18,0.12); }
      .we-ctasection { padding: 64px 32px 0; }
      .we-cta-card { padding: 64px 40px; border-radius: 20px; }
      .we-cta-h { font-size: 64px; }
      .we-foot { padding: 64px 32px 28px; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-top: 80px; }
      .we-foot > div:first-child { grid-column: 1 / -1; }
      .we-foot-mark { font-size: 64px; }
      .we-foot-bot { padding: 20px 32px; }
    }

    /* ---------- MOBILE ---------- */
    @media (max-width: 720px) {
      .we-nav { padding: 16px 20px; }
      .we-logo { font-size: 24px; gap: 8px; }
      .we-navlinks { display: none; }
      .we-cta { font-size: 13px; padding: 9px 14px; }
      .we-hero { padding: 36px 20px 32px; }
      .we-hero-blob { width: 320px; height: 320px; opacity: 0.7; }
      .we-status { font-size: 11px; padding: 6px 11px; margin-bottom: 22px; }
      .we-h1 { font-size: 56px; line-height: 0.96; margin: 0 0 22px; }
      .we-h1 br { display: none; }
      .we-sub { font-size: 16px; margin-bottom: 28px; }
      .we-herobtns { flex-direction: column; align-items: stretch; gap: 10px; }
      .we-btn-pri, .we-btn-sec { font-size: 14px; padding: 14px 20px; justify-content: center; }
      .we-flow { height: 80px; margin-top: 28px; }
      .we-marquee-wrap { padding: 18px 0; }
      .we-marquee { font-size: 20px; gap: 28px; animation-duration: 40s; }
      .we-marquee-block { gap: 28px; }
      .we-marquee-block span:nth-child(even) { font-size: 11px; }
      .we-section { padding: 56px 20px; }
      .we-shead { font-size: 11px; margin-bottom: 18px; }
      .we-stitle { font-size: 36px; margin-bottom: 36px; }
      .we-tcard { padding: 28px 0; }
      .we-tcard-num { margin-bottom: 24px; }
      .we-tcard-title { font-size: 26px; }
      .we-svc-row { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; gap: 8px 14px; padding: 24px 8px; }
      .we-svc-num { grid-column: 1; grid-row: 1; }
      .we-svc-arrow { grid-column: 3; grid-row: 1; font-size: 20px; }
      .we-svc-title { grid-column: 1 / -1; grid-row: 2; font-size: 24px; }
      .we-svc-desc { grid-column: 1 / -1; grid-row: 3; font-size: 14px; }
      .we-svc-row:hover { padding-left: 8px; }
      .we-tools { grid-template-columns: 1fr; }
      .we-tool { min-height: auto; padding: 24px; }
      .we-tool:first-child .we-chat-msgs { max-height: 220px; }
      .we-quiz-q-text { font-size: 19px; min-height: 48px; }
      .we-calc-num { font-size: 44px; }
      .we-process { grid-template-columns: 1fr; }
      .we-step { padding: 28px 20px; min-height: auto; border-right: 0; border-bottom: 1px solid rgba(26,22,18,0.12); }
      .we-step:last-child { border-bottom: 0; }
      .we-step-title { font-size: 26px; }
      .we-ctasection { padding: 48px 20px 0; }
      .we-cta-card { padding: 48px 28px; border-radius: 18px; }
      .we-cta-h { font-size: 44px; line-height: 1; }
      .we-cta-p { font-size: 16px; margin-bottom: 28px; }
      .we-cta-btn { padding: 14px 24px; font-size: 14px; }
      .we-foot { padding: 56px 20px 24px; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; }
      .we-foot-mark { font-size: 56px; }
      .we-foot-bot { padding: 18px 20px; flex-direction: column; gap: 6px; text-align: center; }
    }
  `;

  const marqueeWords = ['ai strategy', 'audit', 'custom agents', 'build', 'rag systems', 'ship', 'workflow automation', 'partner', 'web development', 'stay', 'paid ads', 'invest', 'seo', 'grow'];

  return (
    <div className="we">
      <style>{css}</style>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

      <window.WeNav active="home" />
      <window.WeSEO page="home" />
      {false && <nav className="we-nav-old">
        <div className="we-logo">
          <div className="we-logo-mark"></div>
          leviyet
        </div>
        <div className="we-navlinks">
          <a href="#">Services</a>
          <a href="#">Process</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </div>
        <button className="we-cta">Book intro →</button>
      </nav>}

      <section className="we-hero" ref={heroRef} onMouseMove={onMouseMove}>
        <div
          className="we-hero-blob"
          style={{
            transform: `translate(-50%, -50%)`,
            left: `${mouse.x * 100}%`,
            top: `${mouse.y * 100}%`,
          }}
        ></div>

        <div className="we-status">
          <div className="we-status-dot"></div>
          <span>accepting 2 partnerships in q3 2026</span>
        </div>

        <h1 className="we-h1">
          Your <em>AI-powered</em><br />
          growth partner.
        </h1>
        <p className="we-sub">Leviyet is the team SMBs call when they want AI woven through ops, marketing, and product — not bolted on. We audit, build, and stay invested as a partner, not a vendor.</p>
        <div className="we-herobtns">
          <a href="Leviyet Contact.html" className="we-btn-pri"><span>Book an intro</span> <span className="arrow">→</span></a>
          <a href="Leviyet Process.html" className="we-btn-sec">See how we work</a>
        </div>

        <svg className="we-flow" viewBox="0 0 1440 120" preserveAspectRatio="none">
          <defs>
            <linearGradient id="weflow" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#c8542a" stopOpacity="0" />
              <stop offset="50%" stopColor="#c8542a" stopOpacity="0.7" />
              <stop offset="100%" stopColor="#c8542a" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d={flowPath} stroke="url(#weflow)" strokeWidth="1.5" fill="none" />
        </svg>
      </section>

      <div className="we-marquee-wrap">
        <div className="we-marquee">
          {[...Array(2)].map((_, j) => (
            <div className="we-marquee-block" key={j}>
              {marqueeWords.map((w, i) => (
                <span key={i}>{w}</span>
              ))}
            </div>
          ))}
        </div>
      </div>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>The thesis</div>
        <h2 className="we-stitle">A team that helps you find the corners of your business <em>where AI actually pays off</em> — and then builds it, ships it, and stays in the room while it earns its keep.</h2>
        <div className="we-thesis">
          {[
            { n: '01', t: 'Whole-business view', d: "We learn how revenue, ops, and product fit together before we touch a tool. Then AI makes all three move faster." },
            { n: '02', t: 'Tangible outcomes', d: "Every engagement has a number we move — hours saved, leads booked, conversion lifted. If we can't name it, we don't take it." },
            { n: '03', t: 'Stay in the room', d: "After launch, we stay on retainer. Watch it run. Fix what drifts. Iterate as your business changes — because it always does." },
          ].map(c => (
            <div className="we-tcard" key={c.n}>
              <div className="we-tcard-num">/ 0{c.n.replace('0','')}</div>
              <div className="we-tcard-title">{c.t}</div>
              <div className="we-tcard-desc">{c.d}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>Services</div>
        <h2 className="we-stitle">One offer. <em>Six ways</em> to engage.</h2>
        <div className="we-svc-list">
          {services.map(s => (
            <div className="we-svc-row" key={s.n}>
              <div className="we-svc-num">— {s.n}</div>
              <div className="we-svc-title">{s.t}</div>
              <div className="we-svc-desc">{s.d}</div>
              <div className="we-svc-arrow">→</div>
            </div>
          ))}
        </div>
      </section>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>Try us</div>
        <h2 className="we-stitle">Three live tools. <em>No email gate</em>.</h2>
        <div className="we-tools">
          <div className="we-tool">
            <div className="we-tool-tag">live</div>
            <div className="we-tool-title">Talk to <em>our agent</em></div>
            <div className="we-tool-sub">Trained on how Leviyet works.</div>
            <div className="we-chat-msgs">
              {chatMessages.map((m, i) => <div key={i} className={`we-chat-msg ${m.role}`}>{m.text}</div>)}
            </div>
            <div className="we-chat-input">
              <input value={chatInput} onChange={e => setChatInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && sendChat()} placeholder="Ask anything..." />
              <button onClick={sendChat}>Send</button>
            </div>
          </div>

          <div className="we-tool">
            <div className="we-tool-tag">60s</div>
            <div className="we-tool-title">A 60-second <em>audit</em></div>
            <div className="we-tool-sub">Where could AI actually help you?</div>
            {!showResult ? (
              <>
                <div className="we-quiz-q">Q.0{quizStep+1} / Q.03</div>
                <div className="we-quiz-q-text">{quizQs[quizStep].q}</div>
                <div className="we-quiz-opts">
                  {quizQs[quizStep].opts.map(o => (
                    <button key={o} className="we-quiz-opt" onClick={() => { setQuizAnswers(a => ({...a, [quizStep]: o})); setQuizStep(s => s+1); }}>{o}</button>
                  ))}
                </div>
                <div className="we-quiz-progress">
                  {[0,1,2].map(i => <div key={i} className={`we-quiz-dot ${i <= quizStep ? 'active' : ''}`} />)}
                </div>
              </>
            ) : (
              <>
                <div className="we-quiz-q">// recommendation</div>
                <div className="we-quiz-q-text">Highest leverage for you: <em style={{color:'#c8542a'}}>{quizAnswers[1]?.toLowerCase() || 'ops'}</em>. We'd start with a 2-week audit, prioritize 2 workflows to automate first.</div>
                <button className="we-quiz-opt" style={{marginTop:'auto'}} onClick={() => { setQuizStep(0); setQuizAnswers({}); }}>↻ Restart</button>
              </>
            )}
          </div>

          <div className="we-tool">
            <div className="we-tool-tag">calc</div>
            <div className="we-tool-title">What automation <em>could be worth</em></div>
            <div className="we-tool-sub">Drag the sliders.</div>
            <div className="we-calc-row"><span>// team size</span><span>{calc.team}</span></div>
            <input type="range" min="5" max="100" value={calc.team} onChange={e => setCalc(v => ({...v, team:+e.target.value}))} className="we-calc-slider" />
            <div className="we-calc-row"><span>// hrs/wk manual</span><span>{calc.hours}</span></div>
            <input type="range" min="1" max="20" value={calc.hours} onChange={e => setCalc(v => ({...v, hours:+e.target.value}))} className="we-calc-slider" />
            <div className="we-calc-row"><span>// loaded $/hr</span><span>${calc.wage}</span></div>
            <input type="range" min="20" max="120" value={calc.wage} onChange={e => setCalc(v => ({...v, wage:+e.target.value}))} className="we-calc-slider" />
            <div className="we-calc-result">
              <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#6b5d4d', letterSpacing: '0.1em'}}>// recovered per year</div>
              <div className="we-calc-num">${(displayNum/1000).toFixed(0)}<em>k</em></div>
            </div>
          </div>
        </div>
      </section>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>How we work</div>
        <h2 className="we-stitle">Four moves. <em>Listen, map, build, stay.</em></h2>
        <div className="we-process">
          {[
            { n: '01', t: 'Listen', d: "Two weeks shadowing your team. Calls, screen-shares, reading every doc you've got." },
            { n: '02', t: 'Map', d: "A written diagnosis. Where AI fits, where it doesn't, and the 90-day roadmap." },
            { n: '03', t: 'Build', d: "Small bets first. Internal tools, customer-facing agents, marketing systems." },
            { n: '04', t: 'Stay', d: "Monthly retainer. Watch it run, fix drift, iterate as you grow." },
          ].map(s => (
            <div className="we-step" key={s.n}>
              <div className="we-step-orb">{s.n}</div>
              <div className="we-step-title">{s.t}</div>
              <div className="we-step-desc">{s.d}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>// what makes us different</div>
        <h2 className="we-stitle">Sometimes the best AI advice is <em>"don't use AI."</em></h2>
        <p style={{fontSize:'18px',lineHeight:1.6,color:'#4a3f33',maxWidth:'780px',marginBottom:'48px'}}>A clearer process. A one-page dashboard. One good hire. We've turned down work where the right answer was simpler than what we'd be paid to build. The discipline to say no is the part that makes our yeses worth something.</p>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3, 1fr)',gap:'32px',paddingTop:'32px',borderTop:'1px solid rgba(26,22,18,0.12)'}} className="we-why-grid">
          <div>
            <div style={{fontFamily:"'JetBrains Mono', monospace",fontSize:'11px',color:'#c8542a',letterSpacing:'0.15em',textTransform:'uppercase',marginBottom:'10px'}}>// Toronto-based</div>
            <h3 style={{fontFamily:"'Instrument Serif', serif",fontSize:'24px',lineHeight:1.15,fontWeight:400,margin:'0 0 8px'}}>A small partnership, not a platform.</h3>
            <p style={{fontSize:'14px',lineHeight:1.55,color:'#4a3f33',margin:0}}>The same people who scope your project build it. No offshore handoffs. We accept 2 partnerships per quarter so the work stays good.</p>
          </div>
          <div>
            <div style={{fontFamily:"'JetBrains Mono', monospace",fontSize:'11px',color:'#c8542a',letterSpacing:'0.15em',textTransform:'uppercase',marginBottom:'10px'}}>// you own it</div>
            <h3 style={{fontFamily:"'Instrument Serif', serif",fontSize:'24px',lineHeight:1.15,fontWeight:400,margin:'0 0 8px'}}>Built into your tools, owned by your team.</h3>
            <p style={{fontSize:'14px',lineHeight:1.55,color:'#4a3f33',margin:0}}>Code, configs, accounts — yours. Every engagement ends with training, not a contract you can't leave.</p>
          </div>
          <div>
            <div style={{fontFamily:"'JetBrains Mono', monospace",fontSize:'11px',color:'#c8542a',letterSpacing:'0.15em',textTransform:'uppercase',marginBottom:'10px'}}>// honest in numbers</div>
            <h3 style={{fontFamily:"'Instrument Serif', serif",fontSize:'24px',lineHeight:1.15,fontWeight:400,margin:'0 0 8px'}}>We report what worked and what didn't.</h3>
            <p style={{fontSize:'14px',lineHeight:1.55,color:'#4a3f33',margin:0}}>Real metrics, plain language. <a href="Leviyet Work.html" style={{color:'#c8542a',textDecoration:'underline',textUnderlineOffset:'3px'}}>See selected work →</a></p>
          </div>
        </div>
      </section>

      <section className="we-ctasection">
        <div className="we-cta-card">
          <h2 className="we-cta-h">Let's see if <em>we fit.</em></h2>
          <p className="we-cta-p">30-minute intro call. No deck, no pitch — just a conversation about the problem and whether we're the right partner.</p>
          <a href="Leviyet Contact.html" className="we-cta-btn">Book the call →</a>
        </div>
      </section>

      <window.WeFooter />
    </div>
  );
};

window.Welcome = Welcome;