// landing-app.jsx — Lomas AI · SaaS landing

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "alt",
  "accent": "auto"
}/*EDITMODE-END*/;

// ─── Data ──────────────────────────────────────────────────────────────
const NAV = [
  { id: 'services', label: 'Services' },
  { id: 'process',  label: 'Process' },
  { id: 'pricing',  label: 'Pricing' },
  { id: 'faq',      label: 'FAQ' }
];

const TRUST_LOGOS = [
  { t: 'Pathak Textiles' },
  { t: 'Café Altamira' },
  { t: 'Keshav CNC Works' },
  { t: 'Bombay Dental Studio' },
  { t: 'Punjab Roadways' },
  { t: 'Cordillera Films' },
  { t: 'Cultivar Labs' },
  { t: 'Fundación Humedales' }
];

const SERVICES = [
  {
    n: '01',
    title: 'Just talk. Lomas writes the books.',
    desc: 'Speak — in Hindi, English, or both. Sales, expenses, discounts, cash given to staff. Lomas turns every sentence into a journal entry you can defend.',
    mock: 'voice'
  },
  {
    n: '02',
    title: 'WhatsApp reminders that actually collect.',
    desc: 'Outstanding payments? Lomas drafts the message in your voice and sends it. Soft on day three, firm on day ten, escalating on day twenty. You stay the good guy.',
    mock: 'whatsapp'
  },
  {
    n: '03',
    title: 'A business assistant who never forgets.',
    desc: 'Every sale, every expense, every conversation logged. Ask anything — “how much did Ramesh owe me last Diwali?” — and get the answer in seconds, not stacks.',
    mock: 'assistant'
  },
  {
    n: '04',
    title: 'Insights, not just numbers.',
    desc: 'Lomas reads your patterns and tells you what to do: which product to push, which customer to drop, which expense is eating you. Reports written for owners, not accountants.',
    mock: 'insight'
  }
];

const PROCESS = [
  { n: '01', title: 'Speak',        desc: '“Aaj das kurte beche, sat sau ke rate.” Hindi, English, or mix. Lomas understands how you talk.' },
  { n: '02', title: 'Listen',       desc: 'Every word transcribed and tagged. Sales, expenses, discounts, dues, names — all sorted on the spot.' },
  { n: '03', title: 'Remind',       desc: 'Outstanding payment? Lomas sends a WhatsApp on your behalf — polite first, firmer later, paid by Friday.' },
  { n: '04', title: 'Advise',       desc: 'A weekly memo arrives: what grew, what shrank, who paid, who didn’t, and what to do about it.' }
];

const STATS = [
  { n: '9', unit: 'sec', label: 'Average entry, from voice', desc: 'Speak a transaction. Walk five paces. It is in the books, categorised, dated, and traced.' },
  { n: '₹4.7', unit: 'L', label: 'Avg. dues collected / yr', desc: 'WhatsApp reminders sent by Lomas pull in what owners stopped chasing two quarters ago.' },
  { n: '11', unit: 'lang', label: 'Languages Lomas hears', desc: 'Hindi, English, Hinglish, Marathi, Tamil, Bengali, Gujarati, Punjabi, Kannada, Telugu, Malayalam.' }
];

const CASES = [
  {
    tag: 'WHOLESALE · 14 YRS',
    title: 'Aarav Pathak stopped keeping notebooks.',
    desc: 'Three notebooks, four ledgers, one WhatsApp group. Now Aarav walks his shop floor and just talks. Lomas closed his last quarter in eleven minutes — and caught a vendor double-billing him for two years.',
    accent: 1
  },
  {
    tag: 'HOSPITALITY · 6 YRS',
    title: 'Café Altamira collected ₹ 3.1 L in old dues.',
    desc: 'Lomas\u2019 WhatsApp reminders quietly chased every overdue tab. Diego didn\u2019t send a single message himself — customers paid anyway. The accountant calls them now, not the other way around.',
    accent: 2
  }
];

const FEATURES = [
  { icon: '🎙', title: 'Voice-first, every language',  desc: 'Hindi, English, Hinglish, Marathi, Tamil, Bengali, Gujarati, Punjabi. Speak how you speak.' },
  { icon: '⚱',  title: 'WhatsApp · your front desk',    desc: 'Reminders, invoices, payment chases — all sent on your behalf, in your tone, on your schedule.' },
  { icon: '⦵', title: 'Always-on assistant',            desc: 'Ask anything across years of data. “Kitna baaki hai Sharma ji se?” — answered in a sentence.' },
  { icon: '⛮',  title: 'Outstanding payment radar',     desc: 'Every due tracked, every promise logged. Lomas pings you the morning a payment is overdue.' },
  { icon: '⧁', title: 'Weekly insight memo',            desc: 'Five sentences every Friday. What grew, what to push, who to drop, what to fix.' },
  { icon: '⊡',  title: 'Reports for any audience',      desc: 'P&L, cash flow, GST, balance sheet — each rewritten in plain English for owners and in formal columns for CAs.' }
];

const INTEGRATIONS = [
  { l: 'HDFC',    r: 1, a: 280 },
  { l: 'ICICI',   r: 1, a: 30 },
  { l: 'Kotak',   r: 1, a: 150 },
  { l: 'GSTN',    r: 2, a: 10 },
  { l: 'Razorpay',r: 2, a: 80 },
  { l: 'Stripe',  r: 2, a: 170 },
  { l: 'Tally',   r: 2, a: 250 },
  { l: 'Zoho',    r: 2, a: 320 },
  { l: 'Shopify',  r: 3, a: 0 },
  { l: 'Amazon',   r: 3, a: 60 },
  { l: 'Flipkart', r: 3, a: 120 },
  { l: 'WhatsApp Business', r: 3, a: 195 },
  { l: 'Gmail',    r: 3, a: 260 },
  { l: 'Slack',    r: 3, a: 315 }
];

const TESTIMONIALS = [
  {
    text: 'I just talk to my phone now. Sales, expenses, who owes me — Lomas keeps everything. I have not opened Tally in five months.',
    hi:   '"मैं बस फ़ोन से बात करती हूँ। लोमस सब कुछ याद रखता है।"',
    name: 'Dr. Anita Shah',
    role: 'Owner · Bombay Dental Studio · Mumbai'
  },
  {
    text: 'Forty-six purchase orders a month. Lomas listens once and posts everything. The WhatsApp reminders alone pulled in ₹ 1.8 L of old dues last quarter.',
    name: 'Keshav Iyer',
    role: 'Founder · Keshav CNC Works · Coimbatore'
  },
  {
    text: 'Our accountant calls us now instead of the other way around. Lomas writes a memo every Friday telling us what is going wrong before we feel it.',
    hi:   '"हमारा CA अब हमें फोन करता है।"',
    name: 'Diego Rojas',
    role: 'Owner · Café Altamira · Delhi'
  },
  {
    text: 'Three trucks, thirty drivers, three hundred invoices a week. Drivers send voice notes from the highway. Lomas hears every diesel bill and matches it to a route.',
    name: 'Harjit Singh',
    role: 'Director · Punjab Roadways · Ludhiana'
  },
  {
    text: 'I walk my factory and talk to Lomas like a munim. Every cash payment, every receipt, every bill. The Friday insights catch things I would have missed for months.',
    hi:   '"दुकान में चलते हुए बात कर लेता हूँ।"',
    name: 'Aarav Pathak',
    role: 'CEO · Pathak Textiles · Surat'
  },
  {
    text: 'My CA used to charge me ₹40,000 a year just to clean my books. Now they handle the strategic stuff and Lomas does the rest — in my voice, on my terms.',
    name: 'Ravi Krishnan',
    role: 'Founder · Krishnan Hardware · Madurai'
  }
];

const PRICING = [
  {
    name: 'Starter',
    desc: 'For solo founders and shops doing under 100 transactions a month.',
    monthly: '1,499', yearly: '14,990',
    features: [
      'Up to 100 transactions / mo',
      'WhatsApp + email capture',
      'GSTR-1 + 3B filing',
      'Bank reconciliation · 1 account',
      'P&L · cash · balance sheet',
      'Email support · 1 business day'
    ]
  },
  {
    name: 'Growth',
    desc: 'For growing teams ready to delegate the books entirely.',
    monthly: '4,999', yearly: '49,990',
    popular: true,
    features: [
      'Up to 1,000 transactions / mo',
      'All capture channels + POS sync',
      'All GST + TDS filings',
      'Up to 5 bank accounts',
      'AI memo + plain-English reports',
      'CA collaboration · read-only',
      'Priority support · 4 hr SLA'
    ]
  },
  {
    name: 'Scale',
    desc: 'For multi-entity businesses, manufacturers, and logistics.',
    monthly: '14,999', yearly: '1,49,990',
    features: [
      'Unlimited transactions',
      'Multi-entity, multi-currency',
      'Custom integrations · API',
      'Dedicated bookkeeping reviewer',
      'On-site CA onboarding',
      'SOC 2 audit packet',
      'Dedicated support · 1 hr SLA'
    ]
  }
];

const FAQS = [
  { q: 'How is Lomas different from Tally or Zoho Books?',
    a: 'Tally and Zoho are ledgers — you (or your accountant) still do the data entry. Lomas does the data entry. We read the receipt, post the journal, reconcile the bank, and file the return. You review and approve in minutes, not hours.' },
  { q: 'What if my receipt is in Hindi, Marathi, or Tamil?',
    a: 'We read 11 Indian scripts and 4 international. Handwritten, thermal, smudged, faxed — we trained the OCR on the worst paper trail in India. If a line is genuinely unreadable, we ask one specific question.' },
  { q: 'What about my existing CA?',
    a: 'Your CA gets free read-only access. They can review every entry, audit any month, and export to Tally in one click. Many of our customers’ CAs end up recommending us to their other clients.' },
  { q: 'How long does onboarding take?',
    a: 'Most businesses are live in under a week. We connect to your banks, GST portal, POS, and email, then backfill the last 90 days for free so you start with a clean ledger.' },
  { q: 'Is my data safe?',
    a: 'SOC 2 Type II, DPDP-compliant, AES-256 at rest, TLS 1.3 in transit. Your data is never sold, never used to train models, and is fully exportable at any time. If you cancel, you walk away with a clean dump.' },
  { q: 'What if Lomas makes a mistake on my return?',
    a: 'We pay the penalty. Plainly. In writing. It is in the contract. We have paid it twice in three years, both under ₹5,000. The guarantee is real.' }
];

// ─── Hooks ─────────────────────────────────────────────────────────────
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('[data-reveal]');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-revealed');
          obs.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.05 });
    els.forEach(el => obs.observe(el));
    requestAnimationFrame(() => {
      els.forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.95 && r.bottom > 0) {
          el.classList.add('is-revealed');
          obs.unobserve(el);
        }
      });
    });
    return () => obs.disconnect();
  });
}

// ─── Bits ──────────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand">
          <span className="brand-mark">L</span>
          <span>Lomas</span>
        </a>
        <div className="nav-links">
          {NAV.map(n => <a key={n.id} href={'#' + n.id} className="nav-link">{n.label}</a>)}
        </div>
        <div className="nav-spacer" />
       <a className="nav-cta" href="#contact">
  Start free trial <span className="arrow">↗</span>
</a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section id="top" className="hero" data-screen-label="01 Hero" data-tone="cream">
      <div className="hero-glow" />
      <div className="wrap hero-inner">
        <span className="hero-tag" data-reveal>
          <span className="hero-tag-chip">NEW</span>
          Lomas AI — Voice-first business assistant for Indian businesses
        </span>
        <h1 className="hero-title" data-reveal style={{'--i': 1}}>
          Just talk. <em>Your AI assistant</em> will do everything for you.
        </h1>
        <p className="hero-sub" data-reveal style={{'--i': 2}}>
          Sales, expenses, reminders, payment chases, daily plans, weekly
          insights — for shopkeepers, freelancers, families, anyone with a day
          to manage. Speak in Hindi, English, or both. Lomas listens and acts.
        </p>
        <p className="hero-hi" data-reveal style={{'--i': 3}}>
          बोलो, और हो जाएगा।
        </p>
        <div className="hero-cta" data-reveal style={{'--i': 4}}>
          <a className="btn btn-primary" href="#contact">Start free trial <span className="arrow">↗</span></a>
          <a className="btn btn-ghost" href="#voice">Hear a demo</a>
        </div>
        <div className="hero-trust" data-reveal style={{'--i': 5}}>
          <span className="hero-trust-avatars">
            <i /><i /><i /><i />
          </span>
          <span>Trusted by 4,200+ Indian businesses</span>
        </div>

        <div className="hero-preview" data-reveal style={{'--i': 6}}>
          <HeroPreview />
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [...TRUST_LOGOS, ...TRUST_LOGOS];
  return (
    <section className="trust" data-tone="cream">
      <div className="wrap">
        <div className="trust-label">Quietly closing books at</div>
        <div className="trust-marquee">
          <div className="trust-track">
            {items.map((l, i) => (
              <span key={i} className={'trust-logo' + (i % 3 === 1 ? ' alt' : '')}>{l.t}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── VoiceSection — kinetic "Just talk" cinematic ───────────────────────
const VOICE_LINES = [
  { hi: 'आज दस कुर्ते बेचे, सात सौ के रेट से, पचास का discount',
    en: 'Sold 10 kurtas today at ₹700, ₹50 discount each',
    tag: 'SALE',     out: '+ ₹ 6,500 logged · 14:02' },
  { hi: 'मां को कल सुबह BP की दवा याद दिलाना',
    en: 'Remind Mom about her BP medicine tomorrow morning',
    tag: 'REMINDER', out: 'Set for tomorrow 7:30 AM · WhatsApp draft to Mom' },
  { hi: 'रमेश को पचीस हज़ार का बिल भेजा है, पन्द्रह दिन का due',
    en: 'Sent Ramesh a ₹25,000 invoice, due in 15 days',
    tag: 'INVOICE',  out: 'Invoice #1283 raised · reminder set for day 13' },
  { hi: 'अंजली का PTM शाम छ: बजे है, चार बजे याद दिलाना',
    en: 'Anjali’s PTM is at 6 PM, remind me at 4',
    tag: 'FAMILY',   out: 'Calendar block · 5:00 PM departure suggestion' },
  { hi: 'पेट्रोल के ढाई हज़ार दिए',
    en: 'Paid ₹2,500 for petrol',
    tag: 'EXPENSE',  out: '− ₹ 2,500 logged · Fuel · vehicle 4471' },
  { hi: 'अगले हफ़्ते की जयपुर ट्रिप के लिए होटल बुक कर देना',
    en: 'Book a hotel for next week’s Jaipur trip',
    tag: 'TRAVEL',   out: '3 options shortlisted · ₹4,200–6,800 / night' },
  { hi: 'मुझे शर्मा-जी के बाकी पैसे याद दिलाना कल',
    en: 'Remind me about Sharma-ji’s dues tomorrow',
    tag: 'CHASE',    out: 'Set for tomorrow 10:00 · WhatsApp draft ready' },
  { hi: 'राकेश को आज दो हज़ार कैश दिए advance',
    en: 'Gave Rakesh ₹2,000 cash advance today',
    tag: 'PAYROLL',  out: '− ₹ 2,000 · Staff advance · Rakesh Kumar' }
];

function VoiceSection() {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI(n => (n + 1) % VOICE_LINES.length), 3800);
    return () => clearInterval(t);
  }, [paused]);
  const v = VOICE_LINES[i];

  return (
    <section id="voice" className="voice-sec" data-screen-label="02 Voice" data-tone="dark"
             onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="voice-bg" aria-hidden="true">
        {Array.from({ length: 48 }).map((_, n) => (
          <span key={n} className="voice-bar" style={{
            '--i': n,
            '--delay': (n * 47) % 1000 + 'ms',
            '--amp': 20 + Math.abs(Math.sin(n * 0.42)) * 80 + '%'
          }} />
        ))}
      </div>

      <div className="wrap voice-inner">
        <span className="section-tag" data-reveal>
          <span className="dot" />For shopkeepers, freelancers, parents, anyone
        </span>
        <h2 className="voice-title" data-reveal>
          <span className="voice-title-cap">Just talk.</span>
          <span className="voice-title-hi">बस बात करो।</span>
        </h2>
        <p className="voice-sub" data-reveal>
          Forgetful? Disorganised? Wearing too many hats? Lomas is for anyone
          whose day moves faster than their notebook. Tell it about a sale,
          a chai bill, your mom’s medicine, your kid’s PTM — it remembers,
          reminds, and acts. Hindi, English, Hinglish, whatever-comes-out.
        </p>
        <ul className="voice-pills" data-reveal>
          <li>Shop owners</li>
          <li>Freelancers</li>
          <li>Parents</li>
          <li>Doctors &amp; clinics</li>
          <li>Drivers</li>
          <li>Students</li>
          <li>Anyone with a messy day</li>
        </ul>

        <div className="voice-stage" data-reveal>
          <div className="voice-pane voice-pane-l">
            <div className="voice-status">
              <span className="voice-rec">●</span>
              <span className="mono">LIVE · {String(i + 1).padStart(2, '0')} / 0{VOICE_LINES.length}</span>
              <span className="voice-tag" style={{marginLeft: 'auto'}}>{v.tag}</span>
            </div>
            <div className="voice-said" key={'hi' + i}>
              <span className="voice-quote">“</span>
              <span className="voice-said-hi">{v.hi}</span>
              <span className="voice-said-en">{v.en}</span>
            </div>
            <div className="voice-wave-live" aria-hidden="true">
              {Array.from({ length: 36 }).map((_, n) => (
                <span key={n} style={{ '--n': n }} />
              ))}
            </div>
          </div>

          <div className="voice-pane voice-pane-r">
            <span className="voice-arrow">→</span>
            <div className="voice-result" key={'out' + i}>
              <span className="voice-result-k mono">RECORDED</span>
              <p className="voice-result-v">{v.out}</p>
            </div>
            <div className="voice-receipt">
              <div className="voice-receipt-row"><span>SOURCE</span><span>Voice · {v.tag.toLowerCase()}.m4a</span></div>
              <div className="voice-receipt-row"><span>LANGUAGE</span><span>Hindi · English</span></div>
              <div className="voice-receipt-row"><span>TRACE</span><span>Linked · audit log</span></div>
              <div className="voice-receipt-row"><span>CONF.</span><span>99.{4 + (i % 4)}%</span></div>
            </div>
          </div>
        </div>

        <div className="voice-scrub" data-reveal>
          {VOICE_LINES.map((vl, n) => (
            <button key={n}
                    className={'voice-chip' + (n === i ? ' on' : '')}
                    onClick={() => { setPaused(true); setI(n); }}>
              <span className="voice-chip-n">{String(n + 1).padStart(2, '0')}</span>
              <span className="voice-chip-l">{vl.tag}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function CompareSection() {
  const [tab, setTab] = React.useState('ai');
  const traditional = [
    { h: 'Notebook & memory',
      p: 'You jot a sale on the back of a bill, swear you\u2019ll enter it later, and then a customer walks in.',
      stats: [['Time / day', '47 min'], ['Lost entries', '14%'], ['Recall / 6 mo', '38%']],
      meta: '32% retention' },
    { h: 'Manual chasing of dues',
      p: 'You call Sharma-ji twice, feel awkward, and let the payment ride into next quarter.',
      stats: [['Avg. days overdue', '47'], ['Collected', '61%']],
      meta: '21% recovery' },
    { h: 'Month-end panic',
      p: 'The books get written the night before the CA visits. Receipts go missing, GST is rushed.',
      stats: [['Late filings', '3 / yr'], ['Missed ITC', '₹ 47K']],
      meta: '12% efficiency' }
  ];
  const ai = [
    { h: 'Just talk, every transaction logged',
      p: 'Walk the shop floor and narrate. Lomas turns every sentence into a tagged, dated, traceable entry.',
      stats: [['Time / day', '4 min'], ['Lost entries', '0.4%'], ['Recall / 6 mo', '100%']],
      meta: '99% retention' },
    { h: 'WhatsApp does the chasing',
      p: 'Lomas sends a polite reminder on day 3, a firmer one on day 10, escalates on day 20. You stay the good guy.',
      stats: [['Avg. days overdue', '11'], ['Collected', '94%']],
      meta: '96% recovery' },
    { h: 'A weekly memo, every Friday',
      p: 'Five sentences arrive: what grew, who paid, who didn\u2019t, what to push, what to drop.',
      stats: [['Late filings', '0'], ['ITC recovered', '+₹ 2.3 L']],
      meta: '96% efficiency' }
  ];
  const rows = tab === 'ai' ? ai : traditional;
  const kind = tab === 'ai' ? 'good' : 'bad';
  return (
    <section className="section" data-tone="dark">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <span className="section-tag"><span className="dot" />Comparison</span>
          <h2 className="section-title">
            Two ways to run <em>the same business.</em>
          </h2>
          <p className="section-sub">
            Same shop, same customers, same dues. The difference is what
            happens between your last word and the next morning.
          </p>
        </div>
        <div className="compare" data-reveal>
          <div className="compare-tabs">
            <button className={'compare-tab' + (tab === 'traditional' ? ' on' : '')} onClick={() => setTab('traditional')}>The old way</button>
            <button className={'compare-tab' + (tab === 'ai' ? ' on' : '')} onClick={() => setTab('ai')}>With Lomas</button>
          </div>
          <div className="compare-grid">
            {rows.map((r, i) => (
              <div key={i} className={'compare-card ' + kind} style={{'--i': i}}>
                <h4>{r.h}</h4>
                <p>{r.p}</p>
                {r.stats.map(([k, v]) => (
                  <div key={k} className="compare-stat">
                    <span className="compare-stat-k">{k}</span>
                    <span className="compare-stat-v">{v}</span>
                  </div>
                ))}
                <div className="compare-meta"><span className="badge">{r.meta}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesSection() {
  const renderMock = (key) => {
    if (key === 'voice')    return <MockVoice />;
    if (key === 'whatsapp') return <MockWhatsApp />;
    if (key === 'assistant')return <MockAssistant />;
    if (key === 'insight')  return <MockInsight />;
    return null;
  };
  return (
    <section id="services" className="section" data-screen-label="03 Services" data-tone="cream">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <span className="section-tag"><span className="dot" />Services</span>
          <h2 className="section-title">
            Four jobs, <em>done quietly,</em><br />every working day.
          </h2>
          <p className="section-sub">
            Not features. Jobs. Each one used to take a junior accountant
            half a week. Lomas does them while you eat breakfast.
          </p>
        </div>
        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <article key={s.n} className="service-card" data-reveal style={{'--i': i}}>
              <div className="service-mock">{renderMock(s.mock)}</div>
              <div className="service-meta">
                <span className="service-num">{s.n} / 04</span>
                <h3 className="service-title">{s.title}</h3>
                <p className="service-desc">{s.desc}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProcessSection() {
  return (
    <section id="process" className="section" data-screen-label="04 Process" data-tone="dark">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <span className="section-tag"><span className="dot" />Process</span>
          <h2 className="section-title">
            Live <em>in under a week.</em>
          </h2>
          <p className="section-sub">
            We connect to what you already use, backfill ninety days, and
            hand you a clean ledger you can defend in front of any CA.
          </p>
        </div>
        <div className="process" data-reveal>
          {PROCESS.map((p, i) => (
            <div key={p.n} className="process-step" style={{'--i': i}}>
              <span className="process-num">{p.n}</span>
              <div className="icon">{['◎','✦','⟳','✓'][i]}</div>
              <h4>{p.title}</h4>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatsSection() {
  return (
    <section className="section" data-tone="dark" style={{paddingTop: 0}}>
      <div className="wrap">
        <div className="stats" data-reveal>
          {STATS.map((s, i) => (
            <div key={i} className="stat" style={{'--i': i}}>
              <span className="stat-num">{s.n}<span style={{fontSize: '0.5em', marginLeft: 6}}>{s.unit}</span></span>
              <span className="stat-label">{s.label}</span>
              <span className="stat-desc">{s.desc}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudies() {
  return (
    <section className="section" data-tone="cream">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <span className="section-tag"><span className="dot" />Case files</span>
          <h2 className="section-title">
            Two businesses, <em>back at work.</em>
          </h2>
        </div>
        <div className="cases">
          {CASES.map((c, i) => (
            <article key={i} className="case" data-reveal style={{'--i': i}}>
              <div className="case-img"><CasePlaceholder seed={c.accent} /></div>
              <div className="case-body">
                <span className="case-tag">{c.tag}</span>
                <h3 className="case-title">{c.title}</h3>
                <p className="case-desc">{c.desc}</p>
                <a className="case-link" href="#contact">Read the case <span className="arrow">→</span></a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CasePlaceholder({ seed }) {
  if (seed === 1) {
    return (
      <div className="cp cp-1">
        <div className="cp-roll cp-roll-1" />
        <div className="cp-roll cp-roll-2" />
        <div className="cp-roll cp-roll-3" />
        <div className="cp-tape">PATHAK · 1209</div>
      </div>
    );
  }
  return (
    <div className="cp cp-2">
      <div className="cp-cup">
        <div className="cp-foam" />
        <div className="cp-handle" />
      </div>
      <div className="cp-tape cp-tape-2">ALTAMIRA · LUNCH 14:02</div>
    </div>
  );
}

function MobileAppSection() {
  return (
    <section id="app" className="section" data-tone="cream" data-screen-label="09 App">
      <div className="wrap">
        <div className="appcard" data-reveal>
          <div className="appcard-l">
            <span className="section-tag" style={{alignSelf: 'flex-start'}}>
              <span className="dot" />Mobile app
            </span>
            <h2 className="appcard-title">
              Carry your assistant <em>in your pocket.</em>
            </h2>
            <p className="appcard-hi hi">बोलो और हो जाएगा।</p>
            <p className="appcard-sub">
              Lomas is a single tap on your home screen. Hold to talk —
              the book updates, the reminder sends, the invoice goes out.
              Works offline; syncs when you reconnect.
            </p>

            <ul className="appcard-feats">
              <li><span className="afi">🎙</span>Hold-to-talk in any language</li>
              <li><span className="afi">📲</span>WhatsApp reminders, one tap</li>
              <li><span className="afi">📓</span>All your data, searchable</li>
              <li><span className="afi">📡</span>Works offline — syncs later</li>
            </ul>

            <div className="appcard-cta">
              <a className="appstore-btn" href="#" onClick={e=>e.preventDefault()}>
                <span className="asb-icon" aria-hidden="true">
                  <svg viewBox="0 0 384 512" width="20" height="20" fill="currentColor"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>
                </span>
                <span className="asb-text">
                  <span className="asb-small">Download on the</span>
                  <span className="asb-big">App Store</span>
                </span>
              </a>
              <a className="appstore-btn" href="#" onClick={e=>e.preventDefault()}>
                <span className="asb-icon" aria-hidden="true">
                  <svg viewBox="0 0 512 512" width="20" height="20" fill="currentColor"><path d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z"/></svg>
                </span>
                <span className="asb-text">
                  <span className="asb-small">Get it on</span>
                  <span className="asb-big">Google Play</span>
                </span>
              </a>
            </div>

            <p className="appcard-foot mono small">
              ALSO ON WHATSAPP · 91 89400 89400 · TYPE "HI"
            </p>
          </div>

          <div className="appcard-r">
            <MobileMockup />
          </div>
        </div>
      </div>
    </section>
  );
}

function MobileMockup() {
  return (
    <div className="phone-wrap">
      <div className="phone-glow" />
      <div className="phone">
        <div className="phone-notch" />
        <div className="phone-screen">
          <div className="ph-status">
            <span>9:41</span>
            <span>● ● ●</span>
            <span>100%</span>
          </div>
          <div className="ph-head">
            <span className="ph-brand">
              <span className="ph-mark">L</span>
              <span>Lomas</span>
            </span>
            <span className="ph-avatar" />
          </div>

          <p className="ph-greet">
            Good evening, <b>Aarav.</b>
          </p>
          <p className="ph-greet-sub mono small">
            ↳ HELD ANY KEY · SAY ANYTHING
          </p>

          <div className="ph-bubble in">
            <p>Sharma-ji को बिल भेजा है पच्चीस हज़ार का</p>
            <span className="ph-time mono small">3:14 pm</span>
          </div>
          <div className="ph-bubble out">
            <p>✓ Invoice <b>#1283</b> raised · ₹ 25,000 · due in 15 days. WhatsApp reminder set for day 13.</p>
            <span className="ph-time mono small">3:14 pm · Lomas</span>
          </div>

          <div className="ph-bubble in">
            <p>राकेश को आज दो हज़ार दिए advance</p>
            <span className="ph-time mono small">3:15 pm</span>
          </div>
          <div className="ph-bubble out">
            <p>✓ ₹ 2,000 logged · Staff advance · Rakesh Kumar.</p>
            <span className="ph-time mono small">3:15 pm · Lomas</span>
          </div>

          <div className="ph-mic">
            <div className="ph-mic-wave" aria-hidden="true">
              {Array.from({length: 18}).map((_, i) => (
                <span key={i} style={{ '--i': i, animationDelay: (i * 45) + 'ms' }} />
              ))}
            </div>
            <span className="ph-mic-text mono small">Hold to speak</span>
            <div className="ph-mic-btn">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FeaturesSection() {
  return (
    <section className="section" data-tone="dark">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <span className="section-tag"><span className="dot" />Features</span>
          <h2 className="section-title">
            Built for the <em>way India</em> actually does business.
          </h2>
          <p className="section-sub">
            Not a US bookkeeping tool with rupee symbols glued on. Designed for
            GST notices, cooperative banks, WhatsApp receipts, and tier-2 internet.
          </p>
        </div>
        <div className="features" data-reveal>
          {FEATURES.map((f, i) => (
            <div key={i} className="feature" style={{'--i': i}}>
              <div className="feature-icon">{f.icon}</div>
              <h4>{f.title}</h4>
              <p>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function IntegrationsSection() {
  return (
    <section className="section" data-tone="cream">
      <div className="wrap">
        <div className="integrations" data-reveal>
          <div className="integrations-copy">
            <span className="section-tag" style={{alignSelf: 'flex-start'}}><span className="dot" />Integrations</span>
            <h2 className="section-title" style={{textAlign: 'left', marginTop: 14, fontSize: 'clamp(32px, 4vw, 56px)'}}>
              Plays well with <em>everything you already pay for.</em>
            </h2>
            <p className="section-sub" style={{textAlign: 'left', margin: '14px 0 0'}}>
              218 Indian banks, GSTN, every major POS, and the SaaS tools your
              team actually uses. No spreadsheet exports, no copy-paste.
            </p>
          </div>
          <div className="integrations-orbit">
            <div className="orbit-ring r1" />
            <div className="orbit-ring r2" />
            <div className="orbit-ring r3" />
            <div className="orbit-center">L</div>
            {INTEGRATIONS.map((it, i) => {
              const radius = it.r === 1 ? 100 : it.r === 2 ? 160 : 220;
              const rad = (it.a * Math.PI) / 180;
              const x = Math.cos(rad) * radius;
              const y = Math.sin(rad) * radius;
              return (
                <div key={i} className="orbit-chip"
                     style={{ left: `calc(50% + ${x}px)`, top: `calc(50% + ${y}px)`, transform: 'translate(-50%, -50%)' }}>
                  {it.l}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  return (
    <section className="section" data-tone="dark">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <span className="section-tag"><span className="dot" />Testimonials</span>
          <h2 className="section-title">
            What owners <em>actually say.</em>
          </h2>
        </div>
        <div className="testi-grid">
          {TESTIMONIALS.map((t, i) => (
            <article key={i} className="testi" data-reveal style={{'--i': i}}>
              <p>"{t.text}"</p>
              {t.hi && <p className="hi">{t.hi}</p>}
              <div className="testi-by">
                <div className="testi-avatar" style={{
                  background: `linear-gradient(135deg, hsl(${(i*60)%360} 30% 70%), hsl(${(i*60+40)%360} 30% 40%))`
                }} />
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-role">{t.role}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingSection() {
  const [cycle, setCycle] = React.useState('monthly');
  return (
    <section id="pricing" className="section" data-screen-label="11 Pricing" data-tone="cream">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <span className="section-tag"><span className="dot" />Pricing</span>
          <h2 className="section-title">
            <em>Honest plans.</em> No surprises.
          </h2>
          <p className="section-sub">
            14-day free trial on every plan. Cancel from settings — no calls,
            no scripts, no "are you sure?" pop-ups.
          </p>
        </div>
        <div style={{display: 'flex', justifyContent: 'center'}}>
          <div className="price-toggle">
            <button className={cycle === 'monthly' ? 'on' : ''} onClick={() => setCycle('monthly')}>Monthly</button>
            <button className={cycle === 'yearly' ? 'on' : ''} onClick={() => setCycle('yearly')}>
              Yearly <span className="save">SAVE 17%</span>
            </button>
          </div>
        </div>
        <div className="pricing-grid">
          {PRICING.map((p, i) => (
            <div key={p.name} className={'price-card' + (p.popular ? ' featured' : '')} data-reveal style={{'--i': i}}>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                <span className="price-tag">PLAN · {String(i+1).padStart(2,'0')}</span>
                {p.popular && <span className="price-tag popular">MOST POPULAR</span>}
              </div>
              <h3 className="price-name">{p.name}</h3>
              <p className="price-desc">{p.desc}</p>
              <div className="price-num">
                <span className="cur">₹</span>
                {cycle === 'monthly' ? p.monthly : p.yearly}
                <span className="per">/ {cycle === 'monthly' ? 'month' : 'year'}</span>
              </div>
              <ul className="price-list">
                {p.features.map(f => (
                  <li key={f}><span className="tick">✓</span>{f}</li>
                ))}
              </ul>
              <a className="price-cta" href="#contact">Start 14-day trial <span>↗</span></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  return (
    <section id="faq" className="section" data-screen-label="12 FAQ" data-tone="dark">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <span className="section-tag"><span className="dot" />FAQ</span>
          <h2 className="section-title">
            Questions, <em>answered.</em>
          </h2>
        </div>

        <div className="faq-wrap">
          <aside id="contact" className="faq-side" data-reveal>
            <h3>Still on the fence?</h3>

            <p>
              Most owners want to talk to a real person before handing over the books.
              Book a 20-minute call — no pitch, no scripts.
            </p>

            <a className="btn btn-primary" href="tel:+918383898886" style={{padding: '10px 16px'}}>
              Book a call <span className="arrow">↗</span>
            </a>

            <p style={{marginTop: 24, fontSize: 12.5}}>
              Prefer to write?<br />

              <a href="mailto:delhiitefx@gmail.com" style={{color: 'var(--accent)', textDecoration: 'none', fontWeight: 600}}>
                delhiitefx@gmail.com
              </a>
              <br />

              <a href="mailto:guntherg79@gmail.com" style={{color: 'var(--accent)', textDecoration: 'none', fontWeight: 600}}>
                guntherg79@gmail.com
              </a>
              <br />

              <a href="tel:+918383898886" style={{color: 'var(--accent)', textDecoration: 'none', fontWeight: 600}}>
                +91 8383898886
              </a>
            </p>
          </aside>

          <div className="faq-list" data-reveal>
            {FAQS.map((f, i) => (
              <details key={i} className="faq-item" open={i === 0}>
                <summary>{f.q}</summary>
                <div className="faq-content">{f.a}</div>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section id="final-cta" className="section" data-tone="dark">
      <div className="wrap">
        <div className="cta-banner" data-reveal>
          <div className="cta-glow" />
          <span className="section-tag" style={{background: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.8)', borderColor: 'rgba(255,255,255,0.15)'}}>
            <span className="dot" />Free for 14 days
          </span>

          <h2>
            Hand <em>over the chaos.</em><br />
            Get back to your life.
          </h2>

          <p>
            For business owners. For freelancers. For students. For parents.
            For anyone whose day moves faster than their notebook. The first
            two weeks are free — start with one voice note, see what Lomas does.
          </p>

          <p className="cta-hi hi">बोलो, और हो जाएगा।</p>

          <a className="btn btn-primary" href="#contact">
            Start free trial <span className="arrow">↗</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-tone="dark">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <div className="brand">
              <span className="brand-mark">L</span><span>Lomas</span>
            </div>
            <p className="footer-brand">
              Lomas is a quiet bookkeeper for Indian businesses. Built in
              Delhi. SOC 2 Type II. DPDP-ready. Never sold, never trained
              on, never leaves your ledger.
            </p>
          </div>
          <div className="footer-col">
            <h5>Product</h5>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Customers</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Press</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="#">DPA</a></li>
              <li><a href="#">SOC 2</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Lomas AI · Delhi</span>
          <span>Made for owners. Reviewed by CAs.</span>
        </div>
      </div>
    </footer>
  );
}

// ─── App ───────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  React.useEffect(() => {
    document.body.dataset.theme = t.theme;
    if (t.accent && t.accent !== 'auto') {
      document.documentElement.style.setProperty('--accent', t.accent);
    } else {
      document.documentElement.style.removeProperty('--accent');
    }
  }, [t]);

  return (
    <>
      <Nav />
      <AudioToggle />
      <Hero />
      <VoiceSection />
      <TrustStrip />
      <CompareSection />
      <ServicesSection />
      <ProcessSection />
      <CaseStudies />
      <MobileAppSection />
      <FeaturesSection />
      <IntegrationsSection />
      <TestimonialsSection />
      <PricingSection />
      <FAQSection />
<FinalCTA />
<Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio  label="Mode" value={t.theme}
                     options={[
                       {value:'alt',   label:'Alternating'},
                       {value:'cream', label:'All cream'},
                       {value:'dark',  label:'All dark'}
                     ]}
                     onChange={(v) => setTweak('theme', v)} />
        <TweakColor  label="Accent" value={t.accent}
                     options={['auto','#1E6F4F','#7BE3B0','#E5552B','#2A6FDB','#7A4FDB']}
                     onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </>
  );
}

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