const { useState, useEffect } = React;

/* ---------- routing ---------- */
function useRoute() {
  const [route, setRoute] = useState(window.location.hash.replace('#/', '') || '');
  useEffect(() => {
    const onHash = () => { setRoute(window.location.hash.replace('#/', '')); window.scrollTo(0, 0); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return route;
}
const go = (r) => { window.location.hash = r === '' ? '/' : '/' + r; };

/* ---------- shared ---------- */
function Logo() {
  return (
    <a className="brand" href="#/" aria-label="LogiLabs home">
      <svg width="40" height="40" viewBox="0 0 64 64">
        <rect width="64" height="64" rx="14" fill="#101a2e"/>
        <g transform="translate(9,8)">
          <path d="M14 8 h32 v40 l-5.3 -4 l-5.4 4 l-5.3 -4 l-5.3 4 l-5.4 -4 l-5.3 4 Z" fill="#17a2b8"/>
          <path d="M24 40 L30 16 L36 40 L32.5 40 L30 30 L27.5 40 Z" fill="#ffffff"/>
        </g>
      </svg>
      <span className="brand-name">Logi<span>Labs</span></span>
    </a>
  );
}

const LINKS = [
  { r: '',          label: 'Home' },
  { r: 'pos',       label: 'POS & Business' },
  { r: 'school',    label: 'School Management' },
  { r: 'erp',       label: 'ERP Accounting' },
  { r: 'pricing',   label: 'Pricing' },
  { r: 'contact',   label: 'Contact' },
];

function Header({ route }) {
  const [open, setOpen] = useState(false);
  return (
    <header className="site-header">
      <div className="header-inner">
        <Logo />
        <button className="menu-btn" onClick={() => setOpen(!open)}>☰</button>
        <nav className={'main-nav' + (open ? ' open' : '')}>
          {LINKS.map(l => (
            <a key={l.r} href={'#/' + l.r} className={route === l.r ? 'active' : ''}
               onClick={() => setOpen(false)}>{l.label}</a>
          ))}
          <a href="#/contact" className="nav-cta" onClick={() => setOpen(false)}>Free Trial</a>
        </nav>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div>
          <Logo />
          <p style={{ marginTop: 14 }}>
            LogiLabs builds cloud software for retail, schools and accounting —
            POS, business management, school management and ERP, all in one place.
          </p>
        </div>
        <div>
          <h5>Products</h5>
          <a href="#/pos">POS & Business</a>
          <a href="#/school">School Management</a>
          <a href="#/erp">ERP Accounting</a>
        </div>
        <div>
          <h5>Company</h5>
          <a href="#/">Home</a>
          <a href="#/pricing">Pricing</a>
          <a href="#/contact">Contact</a>
        </div>
        <div>
          <h5>Get in touch</h5>
          <p>WhatsApp: +92 322 626 7658<br/>Available Sat – Thu, 9am – 9pm</p>
          <a href="https://wa.me/923226267658" target="_blank" rel="noreferrer"
             style={{ color: '#7ddcf0', fontWeight: 600 }}>Chat on WhatsApp →</a>
        </div>
      </div>
      <div className="footer-bottom">© {new Date().getFullYear()} LogiLabs. All rights reserved.</div>
    </footer>
  );
}

function SectionHead({ tag, title, sub }) {
  return (
    <div className="section-head">
      <span className="eyebrow">{tag}</span>
      <h2>{title}</h2>
      {sub && <p>{sub}</p>}
    </div>
  );
}

const WA = 'https://wa.me/923226267658';
function StartBtn({ label }) {
  return <a className="btn btn-teal" href="#/contact">{label || 'Start Free Trial'}</a>;
}

/* ---------- product data ---------- */
const PRODUCTS = {
  pos: {
    eyebrow: 'POS & Business Management',
    title: 'Run your entire store from one POS',
    sub: 'Smart Billing POS keeps sales, stock, purchases, customers and accounts in sync across every branch — built for pharmacies, marts, boutiques and any retail counter.',
    chips: ['Pharmacy', 'Mart', 'Boutique', 'Any Retail'],
    icon: 'pi-1', glyph: '🧾',
    features: [
      ['🛒', 'Fast POS billing', 'Touch-friendly counter with barcode scanning, holds, returns and multiple payment modes.'],
      ['📦', 'Inventory & purchase', 'Live stock across branches, OHQ alerts, purchase orders, stock taking and transfers.'],
      ['👥', 'Customers & vendors', 'Ledgers, receivables, payables, insurance claims and loyalty-ready profiles.'],
      ['📊', 'Reports & accounts', 'Daily cashier-wise summaries, sale/stock reports, cash & bank accounts, profit view.'],
      ['🏢', 'Multi-branch', 'One licence, unlimited branches and terminals with role-based users.'],
      ['🧾', 'Daily summary', 'Cashier-wise daily closing with tax, discount and receivable tracking.'],
    ],
    id: 'pos', name: 'POS & Business Management',
  },
  school: {
    eyebrow: 'School Management System',
    title: 'Educator — everything your school runs on',
    sub: 'Admissions to results: students, fees, attendance, exams, timetables, HR and payroll — one system for your whole campus.',
    chips: ['Schools', 'Academies', 'Campuses'],
    icon: 'pi-2', glyph: '🎓',
    features: [
      ['🎓', 'Students & admissions', 'Profiles, classes & sections, admissions, ID cards and certificates.'],
      ['💰', 'Fee management', 'Fee structures, challans, discounts, defaulter tracking and collection reports.'],
      ['🗓', 'Attendance & timetable', 'Daily attendance, timetables and automatic statutory records.'],
      ['📝', 'Exams & results', 'Exam scheduling, marks entry, result cards and position lists.'],
      ['👩‍🏫', 'HR & payroll', 'Employee records, designations, salary sheets and payslips.'],
      ['📄', 'Print-ready', 'PDF challans, result cards, certificates and letters built in.'],
    ],
    id: 'school', name: 'School Management System',
  },
  erp: {
    eyebrow: 'ERP Accounting',
    title: 'Aleairy — accounting that closes itself',
    sub: 'Double-entry accounting for multi-company, multi-campus businesses: vouchers, ledgers, trial balance and financial statements without spreadsheets.',
    chips: ['Accounting', 'Trading', 'Services'],
    icon: 'pi-3', glyph: '📈',
    features: [
      ['🏦', 'Chart of accounts', 'Unlimited companies, campuses and account heads with groups & sub-groups.'],
      ['🧮', 'Vouchers & entries', 'Journal, payment, receipt and contra vouchers with approval flow.'],
      ['📚', 'Ledgers & trial balance', 'Any account, any period — instant ledgers and trial balance.'],
      ['📈', 'Financial statements', 'Income statement and balance sheet, month by month.'],
      ['👔', 'Employees', 'Employee master, designations and salary processing.'],
      ['🖨', 'Reports & printing', 'Every report print/PDF-ready with your company branding.'],
    ],
    id: 'erp', name: 'ERP Accounting (Aleairy)',
  },
};

function ProductPage({ p }) {
  return (
    <div>
      <section className="p-hero">
        <div className="container">
          <span className="eyebrow">{p.eyebrow}</span>
          <h1>{p.title}</h1>
          <p className="sub">{p.sub}</p>
          <div className="hero-actions">
            <StartBtn />
            <a className="btn btn-ghost" href={WA} target="_blank" rel="noreferrer">Ask on WhatsApp</a>
          </div>
          <div style={{ marginTop: 26, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {p.chips.map(c => (
              <span key={c} style={{
                background: 'rgba(255,255,255,.08)', border: '1px solid rgba(255,255,255,.16)',
                color: '#dbe7ff', borderRadius: 20, padding: '5px 14px', fontSize: 12, fontWeight: 500,
              }}>{c}</span>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead tag="What's inside" title={'Everything included in ' + p.name} />
          <div className="features">
            {p.features.map(f => (
              <div className="feature" key={f[1]}>
                <div className="f-ico">{f[0]}</div>
                <div><b>{f[1]}</b><span>{f[2]}</span></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container"><CtaBand id={p.id} name={p.name} /></div>
      </section>
    </div>
  );
}

function CtaBand({ id, name }) {
  return (
    <div className="cta-band">
      <div>
        <h3>Start with {name || 'any LogiLabs product'} today</h3>
        <p>$40/month · first month completely free · no advance, no setup fee.</p>
      </div>
      <a className="btn btn-teal" href={'#/pricing' + (id ? '?p=' + id : '')}>See Pricing</a>
    </div>
  );
}

/* ---------- pages ---------- */
function Home() {
  const cards = [
    { id: 'pos',    ico: 'pi-1', glyph: '🧾', name: 'Smart Billing POS', desc: 'Complete retail POS with inventory, purchases, multi-branch stock, customers and daily summaries.' },
    { id: 'school', ico: 'pi-2', glyph: '🎓', name: 'School Management', desc: 'Students, fees, attendance, exams, HR and payroll — your whole campus in one system.' },
    { id: 'erp',    ico: 'pi-3', glyph: '📈', name: 'ERP Accounting', desc: 'Double-entry accounting with ledgers, trial balance and financial statements for multi-company setups.' },
  ];
  const feats = [
    ['🏬', 'Multi-branch', 'Unlimited branches & terminals under one licence.'],
    ['☁️', 'Cloud based', 'Your data available from any device, anywhere.'],
    ['📊', 'Reports & analytics', 'Sales, stock, accounting and daily summaries — print ready.'],
    ['🔐', 'Roles & security', 'Role-based users with per-page permissions.'],
    ['⚡', 'Fast & simple', 'Built for counters — billing in seconds, not minutes.'],
    ['🛟', 'Local support', 'Direct WhatsApp support from the team that builds it.'],
  ];
  return (
    <div>
      <section className="hero">
        <div className="container hero-grid">
          <div>
            <span className="eyebrow">LogiLabs Software</span>
            <h1>Every software your <span>business</span> needs. One lab.</h1>
            <p className="sub">
              POS & business management, school management and ERP accounting —
              cloud systems built for pharmacies, marts, stores, schools and trading businesses.
            </p>
            <div className="hero-actions">
              <a className="btn btn-teal" href="#/pricing">Start Free Trial</a>
              <a className="btn btn-ghost" href="#/pos">Explore Products</a>
            </div>
            <div className="hero-stats">
              <div className="hero-stat"><b>3 Products</b><span>POS · School · ERP</span></div>
              <div className="hero-stat"><b>$40/mo</b><span>Per product</span></div>
              <div className="hero-stat"><b>30 Days</b><span>Free trial</span></div>
            </div>
          </div>
          <div className="hero-card">
            <h4>Today at a glance</h4>
            <div className="mini-stats">
              <div className="mini-stat"><b>128,540</b><span>Total Sales</span><div className="mini-bar"><i style={{width:'72%'}}></i></div></div>
              <div className="mini-stat"><b>12,300</b><span>Purchases</span><div className="mini-bar"><i style={{width:'38%'}}></i></div></div>
              <div className="mini-stat"><b>1,428</b><span>Products</span><div className="mini-bar"><i style={{width:'55%'}}></i></div></div>
              <div className="mini-stat"><b>36</b><span>Low Stock</span><div className="mini-bar"><i style={{width:'20%'}}></i></div></div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead tag="Products" title="Pick the system your business runs on"
                       sub="Each product works standalone — and they're all built, hosted and supported by the same team." />
          <div className="products">
            {cards.map(c => (
              <div className="product-card" key={c.id}>
                <div className={'p-ico ' + c.ico}>{c.glyph}</div>
                <h3>{c.name}</h3>
                <p>{c.desc}</p>
                <ul>
                  <li>Cloud based — nothing to install</li>
                  <li>First month completely free</li>
                </ul>
                <a className="pc-link" href={'#/' + c.id}>Learn more →</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <SectionHead tag="Why LogiLabs" title="Built with the people who use it"
                       sub="Every screen comes from real counters, real campuses and real accountants." />
          <div className="features">
            {feats.map(f => (
              <div className="feature" key={f[1]}>
                <div className="f-ico">{f[0]}</div>
                <div><b>{f[1]}</b><span>{f[2]}</span></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container"><CtaBand /></div>
      </section>
    </div>
  );
}

function Pricing() {
  const plans = [
    { id: 'pos',    name: 'POS & Business', glyph: '🧾', desc: 'Retail POS, inventory, purchases, customers & accounts.' },
    { id: 'school', name: 'School Management', glyph: '🎓', desc: 'Students, fees, attendance, exams, HR & payroll.' },
    { id: 'erp',    name: 'ERP Accounting', glyph: '📈', desc: 'Multi-company accounting, ledgers & financial statements.' },
  ];
  return (
    <div>
      <section className="p-hero" style={{ padding: '60px 0 56px' }}>
        <div className="container">
          <span className="eyebrow">Pricing</span>
          <h1>Simple. $40 a month. First month free.</h1>
          <p className="sub">No advance, no setup fee, no hidden charges. If you don't love it in the first month, you haven't paid anything.</p>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="pricing">
            {plans.map(pl => (
              <div className="price-card" key={pl.id}>
                <div className="best-tag">FIRST MONTH FREE</div>
                <h3>{pl.glyph} {pl.name}</h3>
                <div className="price-line"><b>$40</b> <span>/ month</span></div>
                <div className="trial-note">30 days free trial</div>
                <ul>
                  <li>{pl.desc}</li>
                  <li>Unlimited branches / campuses</li>
                  <li>Cloud based, works on any device</li>
                  <li>Role-based users & permissions</li>
                  <li>Free updates & WhatsApp support</li>
                </ul>
                <StartBtn label="Start Free Trial" />
              </div>
            ))}
          </div>
          <p style={{ textAlign: 'center', color: '#64748b', fontSize: 13, marginTop: 26 }}>
            Billing is monthly, post-paid — the invoice is generated on the 1st of the next month.
          </p>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container"><CtaBand /></div>
      </section>
    </div>
  );
}

function Contact() {
  const [f, setF] = useState({ name: '', product: 'POS & Business', msg: '' });
  const send = () => {
    const text = encodeURIComponent(
      'Hello LogiLabs! I am ' + (f.name || '...') +
      ' and I am interested in ' + f.product + '. ' + (f.msg || '')
    );
    window.open(WA + '?text=' + text, '_blank');
  };
  return (
    <div>
      <section className="p-hero" style={{ padding: '60px 0 56px' }}>
        <div className="container">
          <span className="eyebrow">Contact</span>
          <h1>Talk to the team that builds it</h1>
          <p className="sub">Fastest reply is on WhatsApp — usually within minutes during working hours.</p>
        </div>
      </section>
      <section className="section">
        <div className="container contact-grid">
          <div className="contact-box">
            <div className="contact-line">
              <div className="c-ico">💬</div>
              <div><b>WhatsApp (fastest)</b><span>+92 322 626 7658</span></div>
            </div>
            <div className="contact-line">
              <div className="c-ico">🕘</div>
              <div><b>Hours</b><span>Saturday – Thursday, 9:00 AM – 9:00 PM</span></div>
            </div>
            <div className="contact-line">
              <div className="c-ico">🌍</div>
              <div><b>Where we work</b><span>Remote — we serve businesses anywhere</span></div>
            </div>
            <div className="contact-line">
              <div className="c-ico">🚀</div>
              <div><b>Free trial</b><span>First month free on every product</span></div>
            </div>
          </div>
          <div className="contact-box contact-form">
            <label>Your Name</label>
            <input value={f.name} onChange={e => setF({ ...f, name: e.target.value })} placeholder="Your name" />
            <label>I'm interested in</label>
            <select value={f.product} onChange={e => setF({ ...f, product: e.target.value })}>
              <option>POS & Business</option>
              <option>School Management</option>
              <option>ERP Accounting</option>
            </select>
            <label>Message</label>
            <textarea value={f.msg} onChange={e => setF({ ...f, msg: e.target.value })}
                      placeholder="Tell us about your business…"></textarea>
            <button className="btn btn-teal" style={{ width: '100%' }} onClick={send}>
              Send on WhatsApp
            </button>
            <p style={{ fontSize: 12, color: '#94a3b8', marginTop: 10 }}>
              Your message opens in WhatsApp — nothing is stored on this site.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- app ---------- */
function App() {
  const route = useRoute().split('?')[0];
  let page = <Home />;
  if (route === 'pos') page = <ProductPage p={PRODUCTS.pos} />;
  else if (route === 'school') page = <ProductPage p={PRODUCTS.school} />;
  else if (route === 'erp') page = <ProductPage p={PRODUCTS.erp} />;
  else if (route === 'pricing') page = <Pricing />;
  else if (route === 'contact') page = <Contact />;
  return (
    <div>
      <Header route={route} />
      {page}
      <Footer />
    </div>
  );
}

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