// Section components for ailiencode.app

const Eyebrow = ({ children, num }) => (
  <div className="eyebrow">
    {num && <span className="eyebrow-num">{num}</span>}
    <span className="eyebrow-line" />
    <span className="eyebrow-text">{children}</span>
  </div>
);

// ——— HERO ———
window.Hero = function Hero({ showMascot }) {
  return (
    <section className="hero" data-screen-label="01 Hero" style={{padding: '88px 0px 50px'}}>
      <div className="hero-grid-bg" />
      <div className="container hero-inner">
        <div className="hero-left">
          <div className="signal-row">
            <span className="signal-dot" />
            <span className="signal-text">TRANSMISSION OPEN · ACCEPTING CLIENTS Q2 2026</span>
          </div>
          <h1 className="hero-title">
            Small software,<br/>
            <span className="italic-accent">serious</span> leverage.
          </h1>
          <p className="hero-lede">
            We build the quietly-useful web apps small businesses actually need —
            invoicing, payroll, vaults, CRMs, internal surveys. If you can describe
            it, we can ship it.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#demos">
              <span>Try a demo app</span>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
            <a className="btn btn-ghost" href="#services">
              <span>See what we build</span>
            </a>
          </div>
          <div className="hero-stats">
            <div className="stat"><div className="stat-v">12+</div><div className="stat-k">shipped apps</div></div>
            <div className="stat-div" />
            <div className="stat"><div className="stat-v">2wk</div><div className="stat-k">avg. MVP</div></div>
            <div className="stat-div" />
            <div className="stat"><div className="stat-v">1:1</div><div className="stat-k">no-middleman work</div></div>
          </div>
        </div>

        {showMascot && (
          <div className="hero-right">
            <div className="mascot-orbit">
              <div className="orbit-ring ring-1" />
              <div className="orbit-ring ring-2" />
              <div className="orbit-ring ring-3" />
              <div className="mascot-wrap">
                <img src="assets/mascot.png" alt="VAIl — AIliencode mascot" className="mascot-img" />
                <div className="speech-bubble">
                  <span className="bubble-greet">Hi, I'm</span>
                  <span className="bubble-name">
                    <span className="sc">v</span><span className="caps">AI</span><span className="sc">l</span>
                  </span>
                  <span className="bubble-tail" />
                </div>
              </div>
              <div className="coord coord-tl">42.7°N · 71.2°W</div>
              <div className="coord coord-br">SYS.OK · v0.12</div>
              <div className="ping ping-1" />
              <div className="ping ping-2" />
            </div>
          </div>
        )}
        {!showMascot && (
          <div className="hero-right">
            <div className="terminal-card">
              <div className="term-chrome">
                <span className="term-dot"/>
                <span className="term-dot"/>
                <span className="term-dot"/>
                <span className="term-path">~/ailiencode/intake</span>
              </div>
              <div className="term-body">
                <div className="term-line"><span className="prompt">$</span> describe your problem</div>
                <div className="term-line comment">// "invoices eat 6 hrs a week"</div>
                <div className="term-line"><span className="prompt">$</span> ship solution</div>
                <div className="term-line output">→ building&hellip; <span className="caret"/></div>
                <div className="term-line output dim">est. 14 days · fixed price · yours to keep</div>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

// ——— SERVICES ———
const services = [
  {
    id: 'invoicing',
    title: 'Invoicing & billing',
    blurb: 'Clean line items, recurring plans, Stripe/ACH out of the box. Your clients pay faster; you chase less.',
    points: ['Custom branding', 'Recurring + one-off', 'Tax + currency aware'],
    glyph: 'Ξ',
  },
  {
    id: 'payroll',
    title: 'Payroll management',
    blurb: 'Hours in, confirmed pay periods out. Exportable stubs, direct deposit handoff, zero spreadsheet hell.',
    points: ['Timesheets + approval', 'Stub generation', 'State-aware calcs'],
    glyph: '◉',
  },
  {
    id: 'vaults',
    title: 'Family password & document vaults',
    blurb: 'End-to-end encrypted shared storage for families or teams. Inherit-safe, audit-logged, friendly UX.',
    points: ['E2EE', 'Recovery flows', 'Shared folders'],
    glyph: '◎',
  },
  {
    id: 'crm',
    title: 'Internal CRM platforms',
    blurb: 'Not Salesforce. A CRM shaped like your actual workflow, built for the way your team already thinks.',
    points: ['Pipeline views', 'Custom fields', 'Email + SMS sync'],
    glyph: '◇',
  },
  {
    id: 'surveys',
    title: 'Team surveys & comms',
    blurb: 'Anonymous pulses, structured 1:1s, org-wide polls. Live dashboards for leadership, privacy for staff.',
    points: ['Anon mode', 'Live dashboards', 'Export anywhere'],
    glyph: '≋',
  },
  {
    id: 'custom',
    title: 'If you can think it',
    blurb: 'Half our builds don\'t fit a category. Describe the pain, we\'ll design, build, and hand you the keys.',
    points: ['Discovery call', 'Fixed-scope MVP', 'Own the code'],
    glyph: '✧',
  },
];

window.Services = function Services() {
  return (
    <section className="services" id="services" data-screen-label="02 Services" style={{padding: '40px 0px 120px'}}>
      <div className="container">
        <div className="section-head">
          <Eyebrow num="02">Services</Eyebrow>
          <h2 className="section-title">Tools that quietly<br/>remove a recurring headache.</h2>
          <p className="section-sub">Six starting points. All of them customizable, all of them yours to own when we're done.</p>
        </div>

        <div className="services-grid">
          {services.map((s, i) => (
            <div className="service-card" key={s.id}>
              <div className="service-top">
                <div className="service-glyph">{s.glyph}</div>
                <div className="service-num">0{i+1}</div>
              </div>
              <h3 className="service-title">{s.title}</h3>
              <p className="service-blurb">{s.blurb}</p>
              <ul className="service-points">
                {s.points.map(p => <li key={p}><span className="tick">→</span>{p}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ——— PORTFOLIO / DEMOS ———
const demos = [
  {
    id: 'ledger',
    codename: 'LEDGER-07',
    name: 'Ledger',
    kind: 'Church billing & invoicing',
    desc: 'A full counseling billing app — manage churches, clients, sessions, and export professional PDF invoices. Try it live.',
    status: 'LIVE DEMO',
    color: '#B8FF5C',
    demoUrl: 'https://pathinvoice.com/demo',
  },
  {
    id: 'cadence',
    codename: 'CADENCE-03',
    name: 'Cadence',
    kind: 'Payroll for small teams',
    desc: 'Confirm a pay period in two clicks. Hours, adjustments, stubs, done. Built for teams of 3–40.',
    status: 'LIVE DEMO',
    color: '#A3E635',
  },
  {
    id: 'hearth',
    codename: 'HEARTH-11',
    name: 'Hearth',
    kind: 'Family vault',
    desc: 'Encrypted shared vault for passwords, wills, insurance, and the stuff you hope no one ever needs.',
    status: 'PRIVATE BETA',
    color: '#84CC16',
  },
  {
    id: 'relay',
    codename: 'RELAY-02',
    name: 'Relay',
    kind: 'Internal CRM',
    desc: 'A CRM shaped around your pipeline, not someone else\'s quarterly targets. Built per-client.',
    status: 'BUILT TO ORDER',
    color: '#65A30D',
  },
];

window.Portfolio = function Portfolio() {
  return (
    <section className="portfolio" id="demos" data-screen-label="03 Demos" style={{padding: '30px 0px 50px'}}>
      <div className="container">
        <div className="section-head">
          <Eyebrow num="03">Portfolio · demo apps</Eyebrow>
          <h2 className="section-title">Working software you can<br/>click through right now.</h2>
          <p className="section-sub">Each one can be re-skinned and tailored for your business in a matter of days.</p>
        </div>

        <div className="demos-grid">
          {demos.map((d, i) => (
            <article className="demo-card" key={d.id}>
              <div className="demo-preview" style={{'--demo-accent': d.color}}>
                <DemoPreview kind={d.id} accent={d.color} />
                <div className="demo-meta">
                  <span className="demo-code">{d.codename}</span>
                  <span className="demo-status">● {d.status}</span>
                </div>
              </div>
              <div className="demo-body">
                <div className="demo-kind">{d.kind}</div>
                <h3 className="demo-name">{d.name}</h3>
                <p className="demo-desc">{d.desc}</p>
                <div className="demo-actions">
                  <a className="demo-link" href={d.demoUrl || '#'} target={d.demoUrl ? '_blank' : undefined} rel={d.demoUrl ? 'noopener noreferrer' : undefined}>Try demo
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M7 17L17 7M7 7h10v10"/></svg>
                  </a>
                  <a className="demo-link ghost" href="#">Read notes</a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// Mini SVG previews for each demo
function DemoPreview({ kind, accent }) {
  if (kind === 'ledger') {
    return (
      <svg viewBox="0 0 320 180" className="demo-svg">
        <rect width="320" height="180" fill="#0B1410"/>
        <rect x="20" y="20" width="280" height="30" rx="4" fill="#132018" stroke="#1F3224"/>
        <rect x="28" y="30" width="60" height="10" rx="2" fill={accent} fillOpacity="0.8"/>
        <circle cx="290" cy="35" r="5" fill={accent}/>
        {[0,1,2,3].map(i => (
          <g key={i}>
            <rect x="20" y={62 + i*24} width="280" height="20" rx="3" fill="#111B15"/>
            <rect x="28" y={68 + i*24} width={60 + i*20} height="8" rx="2" fill="#2A3A2E"/>
            <rect x="240" y={68 + i*24} width="50" height="8" rx="2" fill={accent} fillOpacity={0.4 + i*0.15}/>
          </g>
        ))}
        <rect x="20" y="160" width="280" height="2" fill={accent} fillOpacity="0.5"/>
      </svg>
    );
  }
  if (kind === 'cadence') {
    return (
      <svg viewBox="0 0 320 180" className="demo-svg">
        <rect width="320" height="180" fill="#0B1410"/>
        <text x="20" y="36" fontFamily="'JetBrains Mono',monospace" fontSize="10" fill="#6B7A68">PAY PERIOD · APR 16–30</text>
        <rect x="20" y="48" width="280" height="60" rx="4" fill="#132018" stroke={accent} strokeOpacity="0.4"/>
        <text x="32" y="78" fontFamily="'Space Grotesk',sans-serif" fontSize="28" fontWeight="600" fill={accent}>$48,220</text>
        <text x="32" y="96" fontFamily="'JetBrains Mono',monospace" fontSize="9" fill="#6B7A68">24 STAFF · 1,842 HRS</text>
        <rect x="20" y="120" width="130" height="40" rx="4" fill="#111B15"/>
        <rect x="160" y="120" width="140" height="40" rx="4" fill={accent} fillOpacity="0.15" stroke={accent} strokeOpacity="0.6"/>
        <text x="230" y="145" textAnchor="middle" fontFamily="'Space Grotesk',sans-serif" fontSize="11" fontWeight="600" fill={accent}>CONFIRM →</text>
      </svg>
    );
  }
  if (kind === 'hearth') {
    return (
      <svg viewBox="0 0 320 180" className="demo-svg">
        <rect width="320" height="180" fill="#0B1410"/>
        <circle cx="60" cy="90" r="26" fill="none" stroke={accent} strokeOpacity="0.4"/>
        <circle cx="60" cy="90" r="16" fill={accent} fillOpacity="0.15"/>
        <path d="M50 88 v-4 a10 10 0 0 1 20 0 v4 M46 88 h28 v18 h-28 z" fill="none" stroke={accent} strokeWidth="1.5"/>
        {['Banking','Insurance','Docs','Wifi'].map((label, i) => (
          <g key={label}>
            <rect x="110" y={30 + i*30} width="190" height="22" rx="3" fill="#111B15"/>
            <text x="120" y={45 + i*30} fontFamily="'Space Grotesk',sans-serif" fontSize="11" fill="#C9D6C0">{label}</text>
            <text x="290" y={45 + i*30} textAnchor="end" fontFamily="'JetBrains Mono',monospace" fontSize="9" fill={accent}>•••••••</text>
          </g>
        ))}
      </svg>
    );
  }
  if (kind === 'relay') {
    return (
      <svg viewBox="0 0 320 180" className="demo-svg">
        <rect width="320" height="180" fill="#0B1410"/>
        {['LEAD','QUAL','PROP','WON'].map((col, i) => (
          <g key={col}>
            <text x={30 + i*72} y="28" fontFamily="'JetBrains Mono',monospace" fontSize="9" fill="#6B7A68">{col}</text>
            <rect x={20 + i*72} y="36" width="60" height={90 - i*18} rx="3" fill="#111B15" stroke="#1F3224"/>
            {Array.from({length: 3 - Math.floor(i/2)}).map((_, j) => (
              <rect key={j} x={24 + i*72} y={42 + j*20} width="52" height="14" rx="2" fill={i === 3 ? accent : '#1F3224'} fillOpacity={i === 3 ? 0.8 : 1}/>
            ))}
          </g>
        ))}
        <rect x="20" y="150" width="280" height="14" rx="3" fill="#132018"/>
        <rect x="20" y="150" width="180" height="14" rx="3" fill={accent} fillOpacity="0.6"/>
      </svg>
    );
  }
  return null;
}

// ——— PRICING ———
const tiers = [
  {
    name: 'Signal',
    codename: 'TIER-01',
    price: '$1,500',
    cadence: 'one-time',
    blurb: 'A focused MVP. One problem, solved well, shipped in two weeks.',
    features: [
      'Single-purpose web app',
      'Custom branding',
      'Hosted for 12 months',
      '2 rounds of revisions',
      'You own the code',
    ],
    highlight: false,
  },
  {
    name: 'Relay',
    codename: 'TIER-02',
    price: '$4,600',
    cadence: 'one-time',
    blurb: 'Our sweet spot. A polished internal tool your team actually uses.',
    features: [
      'Multi-page app with auth',
      'Integrations (Stripe, email, Slack)',
      'Admin + user dashboards',
      'Hosted for 12 months',
      '4 rounds of revisions',
      '30-day post-launch support',
    ],
    highlight: true,
  },
  {
    name: 'Constellation',
    codename: 'TIER-03',
    price: 'Let\'s talk',
    cadence: 'scoped together',
    blurb: 'Multi-app systems, ongoing partnerships, unusual stacks.',
    features: [
      'Discovery phase included',
      'Custom scope & timeline',
      'Dedicated build time',
      'Ongoing support retainer',
      'Direct line to the builder',
    ],
    highlight: false,
  },
];

window.Pricing = function Pricing() {
  return (
    <section className="pricing" id="pricing" data-screen-label="04 Pricing">
      <div className="container">
        <div className="section-head">
          <Eyebrow num="04">Pricing</Eyebrow>
          <h2 className="section-title">Fixed price. No retainers<br/>you can't cancel.</h2>
          <p className="section-sub">Pick a starting point. We'll scope the rest together on a 20-minute call.</p>
        </div>

        <div className="pricing-grid">
          {tiers.map((t, i) => (
            <div className={`tier ${t.highlight ? 'tier-highlight' : ''}`} key={t.name}>
              <div className="tier-head">
                <span className="tier-code">{t.codename}</span>
                {t.highlight && <span className="tier-badge">Most picked</span>}
              </div>
              <h3 className="tier-name">{t.name}</h3>
              <p className="tier-blurb">{t.blurb}</p>
              <div className="tier-price">
                <span className="price-v">{t.price}</span>
                <span className="price-c">{t.cadence}</span>
              </div>
              <ul className="tier-features">
                {t.features.map(f => (
                  <li key={f}><span className="tick">✓</span>{f}</li>
                ))}
              </ul>
              <a href="#contact" className={`btn ${t.highlight ? 'btn-primary' : 'btn-ghost'} tier-cta`}>
                {t.highlight ? 'Start here' : 'Pick this tier'}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ——— CONTACT / FOOTER ———
window.Contact = function Contact({ showMascot }) {
  return (
    <section className="contact" id="contact" data-screen-label="05 Contact">
      <div className="container contact-inner">
        <div className="contact-left">
          <Eyebrow num="05">Transmission</Eyebrow>
          <h2 className="section-title">Tell us what's<br/>eating your week.</h2>
          <p className="section-sub">
            A 20-minute call. No pitch, no deck. You describe the problem;
            we tell you honestly whether we're the right fit.
          </p>
          <div className="contact-channels">
            <a className="channel" href="mailto:hi@ailiencode.app">
              <span className="channel-k">Email</span>
              <span className="channel-v">hi@ailiencode.app</span>
            </a>
            <a className="channel" href="#">
              <span className="channel-k">Book a call</span>
              <span className="channel-v">cal.com/ailiencode</span>
            </a>
          </div>
        </div>

        <div className="contact-right">
          <form className="intake" onSubmit={e => e.preventDefault()}>
            <div className="intake-head">
              <span className="intake-dot" />
              <span className="intake-title">INTAKE_FORM.v2</span>
              <span className="intake-status">READY</span>
            </div>
            <label>
              <span className="label-k">001 · Your name</span>
              <input type="text" placeholder="ex. Jamie Rivers" />
            </label>
            <label>
              <span className="label-k">002 · Email</span>
              <input type="email" placeholder="you@company.com" />
            </label>
            <label>
              <span className="label-k">003 · What are you trying to ship?</span>
              <textarea rows="4" placeholder="A payroll tool for 12 landscapers. Currently 3 spreadsheets and tears."></textarea>
            </label>
            <button type="submit" className="btn btn-primary intake-submit">
              Send transmission
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
          </form>
        </div>
      </div>
    </section>
  );
};

window.SiteFooter = function SiteFooter({ showMascot }) {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          {showMascot && <img src="assets/mascot.png" alt="" className="footer-mascot" />}
          <div>
            <div className="footer-wordmark"><span className="ai-mark">AI</span>liencode<span className="tld">.app</span></div>
            <div className="footer-tag">Small software, serious leverage.</div>
          </div>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <div className="col-k">Build</div>
            <a href="#services">Services</a>
            <a href="#demos">Demo apps</a>
            <a href="#pricing">Pricing</a>
          </div>
          <div className="footer-col">
            <div className="col-k">Signal</div>
            <a href="mailto:hi@ailiencode.app">hi@ailiencode.app</a>
            <a href="#">cal.com/ailiencode</a>
            <a href="#">github.com/ailiencode</a>
          </div>
          <div className="footer-col">
            <div className="col-k">Coordinates</div>
            <div className="coord-line">42.7°N · 71.2°W</div>
            <div className="coord-line">EST · UTC−5</div>
            <div className="coord-line">Est. 2024</div>
          </div>
        </div>
      </div>
      <div className="container footer-base">
        <div>© 2026 AIliencode — made on Earth.</div>
        <div className="footer-ticker">
          <span>• ACCEPTING Q2 CLIENTS</span>
          <span>• 2-WEEK MVP</span>
          <span>• FIXED PRICE</span>
          <span>• YOU OWN THE CODE</span>
        </div>
      </div>
    </footer>
  );
};

// Export for other scripts
Object.assign(window, { Eyebrow });