// Sections of the Caerulean AI website.
const { useState, useEffect, useRef } = React;

// ---------------------- NAV ----------------------
function Nav({ active }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 16);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  const links = [
    { id: 'services', label: 'Services' },
    { id: 'why', label: 'Why us' },
    { id: 'process', label: 'Process' },
    { id: 'usecases', label: 'Use cases' },
    { id: 'about', label: 'About' },
  ];

  return (
    <nav className="nav" data-scrolled={scrolled}>
      <div className="nav-inner">
        <a href="#top" className="brand">
          <span className="brand-mark" style={{ color: 'var(--accent)' }}>
            <Icon.Logo />
          </span>
          <span>Caerulean AI</span>
        </a>
        <div className="nav-links">
          {links.map((l) => (
            <a key={l.id} href={`#${l.id}`} className="nav-link" data-active={active === l.id}>
              {l.label}
            </a>
          ))}
        </div>
        <a href="#contact" className="nav-cta">Book a call</a>
      </div>
    </nav>
  );
}

// ---------------------- HERO ----------------------
function Hero() {
  return (
    <section className="section hero" id="top">
      <div className="hero-grid" />
      <div className="hero-glow" />
      <div className="wrap hero-inner">
        <div className="hero-tag reveal in">
          <span className="dot" />
          <span>AI engineering · idea → production</span>
        </div>
        <h1 className="hero-headline reveal in" data-d="1">
          Custom AI solutions,<br />
          built for <em>real business</em> problems.
        </h1>
        <p className="hero-sub reveal in" data-d="2">
          Caerulean AI helps companies turn ideas into production-ready AI systems —
          from automation and AI agents to data pipelines, LLM apps, and cloud deployment.
        </p>
        <div className="hero-ctas reveal in" data-d="3">
          <a href="#contact" className="btn btn-primary">
            Book a consultation
            <Icon.ArrowR className="btn-arrow" />
          </a>
          <a href="#services" className="btn btn-ghost">
            View services
          </a>
        </div>
        <div className="hero-trust reveal in" data-d="4">
          <span className="bar" />
          <span>AI engineering · product development · cloud deployment</span>
        </div>

        <div className="hero-meta reveal in" data-d="5">
          <div>
            <div className="lbl">Practice</div>
            <div className="val">AI engineering studio</div>
          </div>
          <div>
            <div className="lbl">Stack</div>
            <div className="val">LLMs · Agents · MLOps</div>
          </div>
          <div>
            <div className="lbl">Delivery</div>
            <div className="val">Prototype → Production</div>
          </div>
          <div>
            <div className="lbl">Engagements</div>
            <div className="val">Project, retainer, advisory</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------------- SERVICES ----------------------
const SERVICES = [
  {
    icon: 'Agent',
    title: 'AI Agents & Automation',
    body: 'We build AI agents that automate workflows, connect tools, and reduce repetitive manual work.',
  },
  {
    icon: 'LLM',
    title: 'Custom LLM Applications',
    body: 'Chatbots, copilots, document intelligence tools, and internal AI assistants tailored to your business.',
  },
  {
    icon: 'Product',
    title: 'AI Product Development',
    body: 'We turn AI product ideas into working MVPs, prototypes, and production systems.',
  },
  {
    icon: 'Data',
    title: 'Data & MLOps Infrastructure',
    body: 'Data pipelines, model deployment workflows, observability, and cloud infrastructure for AI systems.',
  },
  {
    icon: 'Automation',
    title: 'Business Process Automation',
    body: 'We connect APIs, databases, CRMs, internal systems, and AI models to streamline operations.',
  },
  {
    icon: 'Cloud',
    title: 'Cloud & DevOps for AI',
    body: 'We deploy scalable AI applications using modern cloud, Kubernetes, CI/CD, and monitoring practices.',
  },
];

function Services() {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">What we build</span>
          <h2>Services that move you from idea to a system in production.</h2>
          <p>Six areas of practice. Most projects combine two or three — we deliver them as one team, end to end.</p>
        </div>
        <div className="services-grid">
          {SERVICES.map((s, i) => {
            const IconC = Icon[s.icon];
            return (
              <a key={s.title} href="#contact" className="service reveal" data-d={(i % 3) + 1}>
                <div className="svc-head">
                  <span className="svc-icon"><IconC /></span>
                  <span className="svc-arrow"><Icon.ArrowUR /></span>
                </div>
                <span className="svc-num">{String(i + 1).padStart(2, '0')} / Service</span>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------------------- WHY ----------------------
const WHY = [
  'We focus on real business outcomes — not demos.',
  'We can build from prototype all the way to production.',
  'We understand AI, cloud, backend systems, and product delivery.',
  'We work fast, communicate clearly, and keep solutions maintainable.',
  'We design systems that clients can actually use and operate.',
];

function Why() {
  return (
    <section className="section" id="why">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Why Caerulean</span>
          <h2>Practical AI engineering, not just demos.</h2>
          <p>A small senior team that ships software you can run in production — not slideware.</p>
        </div>
        <div className="split">
          <ol className="why-list reveal">
            {WHY.map((w, i) => (
              <li key={i}>
                <span className="num">0{i + 1}</span>
                <span>{w}</span>
              </li>
            ))}
          </ol>
          <div className="why-card reveal" data-d="2">
            <div className="term-head">
              <span className="dots"><i /><i /><i /></span>
              caerulean — engagement · v1
            </div>
            <div className="terminal">
              <div><span className="prompt">$</span> caerulean discover <span className="dim">--client acme --domain ops</span></div>
              <div className="dim">  → mapped workflow, 7 systems, 3 bottlenecks</div>
              <div><span className="prompt">$</span> caerulean design <span className="dim">--arch agent+rag --cloud aws</span></div>
              <div className="dim">  → architecture, integrations, eval plan</div>
              <div><span className="prompt">$</span> caerulean build <span className="dim">--mvp 4w --prod 10w</span></div>
              <div className="dim">  → MVP in 4 weeks, hardened by 10</div>
              <div><span className="prompt">$</span> caerulean deploy <span className="dim">--monitor --improve</span></div>
              <div><span className="ok">  ✓ shipped · runbook · handoff complete</span></div>
              <div>&nbsp;</div>
              <div><span className="prompt">$</span> _<span className="cursor" style={{ display: 'inline-block', width: '8px', height: '14px', background: 'var(--accent)', marginLeft: '4px', verticalAlign: '-2px', animation: 'pulse 1.2s steps(2) infinite' }} /></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------------- PROCESS ----------------------
const STEPS = [
  { tag: 'Step 01', title: 'Discover', body: 'We understand your business problem, workflow, and technical requirements.', glyph: 'Glyph1' },
  { tag: 'Step 02', title: 'Design', body: 'We define the right AI architecture, UX, integrations, and implementation plan.', glyph: 'Glyph2' },
  { tag: 'Step 03', title: 'Build', body: 'We develop the application, automation, data pipeline, or AI system.', glyph: 'Glyph3' },
  { tag: 'Step 04', title: 'Deploy & Improve', body: 'We launch, monitor performance, and improve it based on real usage.', glyph: 'Glyph4' },
];

function Process() {
  return (
    <section className="section process" id="process">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">How we work</span>
          <h2>A short, predictable path from problem to production.</h2>
          <p>Four phases. Tight feedback loops. We share artifacts at every step — not just the final deliverable.</p>
        </div>
        <div className="process-grid">
          {STEPS.map((s, i) => {
            const G = Icon[s.glyph];
            return (
              <div key={s.title} className="step reveal" data-d={i + 1}>
                <div className="step-tag">
                  <b>{s.tag.split(' ')[1]}</b>
                  <span>{s.tag.split(' ')[0]}</span>
                </div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                <div className="step-glyph"><G /></div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------------------- USE CASES ----------------------
const USECASES = [
  'AI customer support assistant',
  'Internal knowledge base chatbot',
  'AI workflow automation agent',
  'Document processing & extraction',
  'Sales / operations automation tool',
  'AI-powered analytics dashboard',
  'Custom AI SaaS MVP',
  'AI integration with existing business software',
];

function UseCases() {
  return (
    <section className="section" id="usecases">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Example projects</span>
          <h2>What we can build for you.</h2>
          <p>A small sample of common engagements. If your problem isn't here, it likely still fits.</p>
        </div>
        <div className="uc-grid">
          {USECASES.map((u, i) => (
            <div key={u} className="uc reveal" data-d={(i % 4) + 1}>
              <span className="uc-mark">U/{String(i + 1).padStart(2, '0')}</span>
              <div className="uc-title">{u}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------------- ABOUT ----------------------
function About() {
  return (
    <section className="section" id="about">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">About</span>
          <h2>About Caerulean AI</h2>
        </div>
        <div className="about-grid">
          <p className="about-copy reveal">
            Caerulean AI is an <strong>AI engineering company</strong> focused on building practical,
            production-ready AI solutions for businesses. We combine AI development, software
            engineering, cloud infrastructure, and automation expertise to help clients move from
            <strong> concept to working product</strong>.
          </p>
          <div className="stamp reveal" data-d="2">
            <div className="stamp-row">
              <span className="k">Founded</span>
              <span className="v">An AI engineering studio</span>
            </div>
            <div className="stamp-row">
              <span className="k">Focus</span>
              <span className="v">Custom AI solutions for business</span>
            </div>
            <div className="stamp-row">
              <span className="k">Disciplines</span>
              <span className="v">AI · Software · Cloud · Automation</span>
            </div>
            <div className="stamp-row">
              <span className="k">Work with</span>
              <span className="v">Startups, SMBs, mid-market & enterprise</span>
            </div>
            <div className="stamp-row">
              <span className="k">Contact</span>
              <span className="v mono">info@caerulean.ai</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------------- CTA + FOOTER ----------------------
function CTA() {
  const [copied, setCopied] = useState(false);
  const copy = async () => {
    try {
      await navigator.clipboard.writeText('info@caerulean.ai');
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch (e) { /* no-op */ }
  };
  return (
    <section className="section cta" id="contact">
      <div className="wrap">
        <div className="cta-inner reveal">
          <div>
            <span className="eyebrow" style={{ marginBottom: '20px', display: 'inline-flex' }}>Let's talk</span>
            <h2 style={{ marginTop: '14px' }}>Have an AI idea or business process you want to automate?</h2>
            <p>Let's discuss what can be built and how to move it into production. Most first conversations take 30 minutes.</p>
          </div>
          <div className="cta-right">
            <a className="btn btn-primary" href="mailto:info@caerulean.ai?subject=Project%20inquiry%20—%20Caerulean%20AI" style={{ justifyContent: 'space-between' }}>
              <span>Contact Caerulean AI</span>
              <Icon.ArrowR className="btn-arrow" />
            </a>
            <button className="email-card" onClick={copy} aria-label="Copy email address">
              <span style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'flex-start' }}>
                <small>Email</small>
                <span>info@caerulean.ai</span>
              </span>
              <span className="copy-state" data-copied={copied}>
                {copied ? (<><Icon.Check /> Copied</>) : (<><Icon.Copy /> Copy</>)}
              </span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-inner">
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '10px' }}>
          <span style={{ color: 'var(--accent)' }}><Icon.Logo /></span>
          <span style={{ color: 'var(--fg-dim)' }}>Caerulean AI</span>
        </div>
        <div className="mono">© {new Date().getFullYear()} · info@caerulean.ai</div>
      </div>
    </footer>
  );
}

window.Sections = { Nav, Hero, Services, Why, Process, UseCases, About, CTA, Footer };