/* OPTECH marketing site — page components: Home, Services, Work, About, Contact */

const { useState: useStateP } = React;

/* ============================================================
   HOME PAGE
   ============================================================ */
function HomePage({ onNav, onOpenWork }) {
  const [heroVariant, setHeroVariant] = useStateP(() => {
    try { return localStorage.getItem('op-hero-variant') || 'iso-stack'; } catch (e) { return 'iso-stack'; }
  });
  const pickVariant = (v) => {
    setHeroVariant(v);
    try { localStorage.setItem('op-hero-variant', v); } catch (e) {}
  };
  const variants = [
    { id: 'iso-stack',  label: 'A · ISO-STACK',     sub: 'FreeSVG isometric' },
    { id: 'node-graph', label: 'B · NODE-GRAPH',    sub: 'Pixeltrue network' },
    { id: 'platform',   label: 'C · PLATFORM',      sub: 'IsoFlat layered' },
  ];
  return (
    <div data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero">
        <div className="hero-inner">
          <div>
            <div className="eyebrow on-ink">OP-SYSTEM / EU · INTL / REMOTE-FIRST</div>
            <h1>Prototype fast.<br/>Build for <span className="accent">real.</span></h1>
            <p>OPTECH helps startups and SMEs turn complex ideas into working software: from AI workflows and internal platforms to full-stack products and private deployments.</p>
            <div className="hero-actions">
              <button className="btn btn--signal" onClick={() => onNav('contact')}>Tell us about your project →</button>
              <button className="btn" onClick={() => onNav('work')}>See what we build</button>
            </div>
          </div>
          <div className="hero-visual">
            <img src="assets/hero-isometric.png" alt="OPTECH isometric platform diagram" className="hero-iso-img" />
            <div className="hero-variant-picker" role="radiogroup" aria-label="Hero illustration" style={{display:'none'}}>
              <div className="hvp-label">FIG · CHOOSE STYLE</div>
              <div className="hvp-options">
                {variants.map(v => (
                  <button
                    key={v.id}
                    role="radio"
                    aria-checked={heroVariant === v.id}
                    className={"hvp-opt" + (heroVariant === v.id ? " is-active" : "")}
                    onClick={() => pickVariant(v.id)}
                  >
                    <span className="hvp-opt-id">{v.label}</span>
                    <span className="hvp-opt-sub">{v.sub}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="section-inner">
          <div className="hero-meta">
            <div className="hero-meta-cell">
              <div className="lbl">PROTOTYPE</div>
              <div className="val">Days, not quarters.</div>
            </div>
            <div className="hero-meta-cell">
              <div className="lbl">BUILD</div>
              <div className="val">Bespoke, production-ready.</div>
            </div>
            <div className="hero-meta-cell">
              <div className="lbl">AI</div>
              <div className="val">Connected to real workflows.</div>
            </div>
            <div className="hero-meta-cell">
              <div className="lbl">DEPLOY</div>
              <div className="val">Cloud, hybrid, or private.</div>
            </div>
          </div>

          <div className="ticker">
            <div className="ticker-track">
              <span className="code">OP-024</span><span>Agritech Operations Platform <span className="sep">·</span> Field-Level Planning <span className="sep">·</span> Stock Tracking</span>
              <span className="code">OP-031</span><span>Automotive B2B Platform <span className="sep">·</span> Dealerships <span className="sep">·</span> Repair Shops</span>
              <span className="code">OP-037</span><span>Education Platform <span className="sep">·</span> Web + Mobile <span className="sep">·</span> Certifications</span>
              <span className="code">OP-042</span><span>Compliance System <span className="sep">·</span> Digital-Signature Workflows</span>
              <span className="code">OP-051</span><span>Crop Intelligence <span className="sep">·</span> Satellite-Assisted Analysis</span>
              <span className="code">OP-058</span><span>Mobile Lending <span className="sep">·</span> Apply <span className="sep">·</span> Manage <span className="sep">·</span> Repay</span>
              <span className="code">OP-024</span><span>Agritech Operations Platform <span className="sep">·</span> Field-Level Planning</span>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST STRIP */}
      <div className="trust-strip">
        <div className="trust-strip-inner">
          <div className="trust-item">
            <div className="glyph">● 01 / POSITIONING</div>
            <div className="text">AI-native, not AI-theater.</div>
          </div>
          <div className="trust-item">
            <div className="glyph">● 02 / POSITIONING</div>
            <div className="text">Prototype-first, not PowerPoint-first.</div>
          </div>
          <div className="trust-item">
            <div className="glyph">● 03 / POSITIONING</div>
            <div className="text">Bespoke systems for messy real-world problems.</div>
          </div>
        </div>
      </div>

      {/* WHAT WE BUILD */}
      <section>
        <div className="section-inner">
          <div className="section-header">
            <div>
              <div className="eyebrow">WHAT WE BUILD · OP-DOMAINS</div>
              <h2>What we build</h2>
            </div>
            <p>We build custom software for teams that need practical technical execution, fast iteration, and systems that can keep growing after the first version.</p>
          </div>

          <div className="build-grid">
            <div className="build-cell">
              <div>
                <div className="code">D-01</div>
                <h3>Fast prototypes and MVPs</h3>
                <p>Working prototypes and first versions for teams that need to validate, demo, or launch quickly.</p>
              </div>
              <div className="glyph-box"><GlyphMVP /></div>
            </div>
            <div className="build-cell">
              <div>
                <div className="code">D-02</div>
                <h3>AI workflows and automation</h3>
                <p>AI-enabled systems that connect to your tools, data, and business processes.</p>
              </div>
              <div className="glyph-box"><GlyphAI /></div>
            </div>
            <div className="build-cell">
              <div>
                <div className="code">D-03</div>
                <h3>Bespoke software platforms</h3>
                <p>Custom web, mobile, backend, and API systems built around real business workflows.</p>
              </div>
              <div className="glyph-box"><GlyphPlatform /></div>
            </div>
            <div className="build-cell">
              <div>
                <div className="code">D-04</div>
                <h3>Cloud, hybrid, and private deployments</h3>
                <p>Production-ready infrastructure for teams with security, governance, or deployment constraints.</p>
              </div>
              <div className="glyph-box"><GlyphInfra /></div>
            </div>
          </div>
        </div>
      </section>

      {/* WHY OPTECH */}
      <section style={{ background: 'var(--paper-2)' }}>
        <div className="section-inner">
          <div className="section-header">
            <div>
              <div className="eyebrow">WHY OPTECH · OP-PRINCIPLES</div>
              <h2>Why teams work with OPTECH</h2>
            </div>
            <p>Four convictions that shape how we scope, prototype, build, and deploy. They explain why the work tends to outlive the first demo.</p>
          </div>

          <div className="why-grid">
            {[
              ['01', 'Working software beats theoretical plans', 'We move quickly toward something usable, then improve it through real feedback.'],
              ['02', 'AI should be connected to real workflows', 'We build AI systems that interact with tools, data, processes, and people, not isolated demos.'],
              ['03', 'Fast does not mean disposable', 'We prototype quickly, but with enough technical judgment to avoid dead ends.'],
              ['04', 'Deployment matters', 'A system is only useful when it can run reliably, securely, and observably in the right environment.'],
            ].map(([num, h, p]) => (
              <div key={num} className="why-cell">
                <div className="num">{num} / PRINCIPLE</div>
                <h3>{h}</h3>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SELECTED WORK PREVIEW */}
      <section>
        <div className="section-inner">
          <div className="section-header">
            <div>
              <div className="eyebrow">SELECTED WORK · OP-MANIFEST</div>
              <h2>Selected work</h2>
            </div>
            <p>We have built software across agritech, automotive, education, fintech, compliance, marketplaces, and community platforms, helping teams turn complex workflows into usable digital products.</p>
          </div>

          <div className="work-preview-grid">
            {WORK_CARDS.slice(0, 6).map((w) => (
              <div key={w.code} className="work-card" onClick={() => onOpenWork(w)}>
                <div className="code">{w.code} · {w.vertical.toUpperCase()}</div>
                <h3>{w.title}</h3>
                <p>{w.summary}</p>
                <div className="thumb">{w.thumb}</div>
                <div className="arrow">→</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 48 }}>
            <button className="btn btn--ghost" onClick={() => onNav('work')}>View selected work →</button>
          </div>
        </div>
      </section>

      {/* TECHNOLOGY */}
      <section style={{ background: 'var(--paper-2)' }}>
        <div className="section-inner">
          <div className="section-header">
            <div>
              <div className="eyebrow">TECHNOLOGY · OP-STACK</div>
              <h2>Practical technology, used where it fits</h2>
            </div>
            <p>We use modern tools because they help us ship better systems faster, not because they look good in a pitch deck.</p>
          </div>

          <div className="tech-grid">
            <div className="tech-group">
              <div className="label">T-01</div>
              <h3>Product engineering</h3>
              <div className="tech-chips">
                {['TypeScript','React','Next.js','Node.js','Python','PostgreSQL','Redis','REST APIs'].map(t => <span key={t} className="chip">{t}</span>)}
              </div>
            </div>
            <div className="tech-group">
              <div className="label">T-02</div>
              <h3>AI and data</h3>
              <div className="tech-chips">
                {['OpenAI','Anthropic','Agentic workflows','Multi-agent systems','DAGs','Pandas','OpenCV','Data pipelines'].map(t => <span key={t} className="chip">{t}</span>)}
              </div>
            </div>
            <div className="tech-group">
              <div className="label">T-03</div>
              <h3>Infrastructure and deployment</h3>
              <div className="tech-chips">
                {['Docker','Kubernetes','Talos','Helm','AWS','GCP','Hetzner','Vercel','Serverless'].map(t => <span key={t} className="chip">{t}</span>)}
              </div>
            </div>
            <div className="tech-group">
              <div className="label">T-04</div>
              <h3>Security and governance</h3>
              <div className="tech-chips">
                {['SSO','RBAC','VPN access','Private deployments','Cloud','Hybrid','On-prem','Monitoring','Observability'].map(t => <span key={t} className="chip">{t}</span>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <div className="cta-block">
        <div className="cta-block-inner">
          <div>
            <div className="eyebrow on-ink">OP-INTAKE / READY WHEN YOU ARE</div>
            <h2>Have a complex idea, workflow, or system to build?</h2>
          </div>
          <div>
            <p>Tell us what you are trying to build. We will help you think through the fastest practical path from idea to working software.</p>
            <button className="btn btn--signal" onClick={() => onNav('contact')}>Tell us about your project →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
const SERVICES_DATA = [
  {
    code: 'S-01',
    title: 'Prototype Sprint',
    copy: 'Turn an idea, workflow, or product concept into a working prototype fast.',
    bestFor: [
      'Startups testing a product idea',
      'SMEs validating an internal tool',
      'Teams exploring AI use cases',
      'Founders preparing demos',
      'Companies needing something tangible before a larger build',
    ],
    deliverables: [
      'Working prototype',
      'Core user flow',
      'Frontend',
      'Backend or API if needed',
      'Simple deployment',
      'Technical recommendation',
      'Next-step roadmap',
    ],
    closing: 'In a short sprint, we build the smallest useful version of your idea so you can test it with real users, stakeholders, or internal teams.',
  },
  {
    code: 'S-02',
    title: 'AI Workflow Automation',
    copy: 'Build AI-powered workflows that connect to your real tools, data, and business processes.',
    bestFor: [
      'Document-heavy teams',
      'Operations teams',
      'Support and admin workflows',
      'Technical teams',
      'Companies exploring agents or copilots',
      'Teams with repetitive decision workflows',
    ],
    deliverables: [
      'AI workflow design',
      'LLM integration',
      'Agentic workflow',
      'Multi-step workflow',
      'Human approval steps',
      'Retries and validation',
      'Dashboard or internal UI',
      'Monitoring and cost visibility',
    ],
    closing: 'We do not just add a chatbot to your website. We build AI systems that help your team process information, automate decisions, and move work through real business workflows.',
  },
  {
    code: 'S-03',
    title: 'Bespoke Product Build',
    copy: 'Custom web, mobile, and backend systems for specific business workflows.',
    bestFor: [
      'Startups building a product',
      'SMEs replacing spreadsheets or manual processes',
      'Companies needing a custom B2B platform',
      'Teams with workflows that off-the-shelf tools cannot handle',
    ],
    deliverables: [
      'Frontend',
      'Backend',
      'Database',
      'API',
      'Admin dashboard',
      'Integrations',
      'Deployment',
      'Monitoring',
      'Maintenance',
    ],
    closing: 'We build custom software around the way your business actually works, not around the limitations of generic tools.',
  },
  {
    code: 'S-04',
    title: 'Technical Advisory',
    copy: 'Senior technical guidance for product, AI, architecture, and infrastructure decisions.',
    bestFor: [
      'Founders',
      'SMEs with internal teams',
      'Companies choosing between tools or vendors',
      'Teams stuck on architecture decisions',
      'Businesses exploring AI feasibility',
      'Companies planning complex technical systems',
    ],
    deliverables: [
      'Architecture review',
      'Technical roadmap',
      'Feasibility assessment',
      'Infrastructure plan',
      'AI opportunity assessment',
      'Vendor and tooling recommendations',
    ],
    closing: 'When the technical path is unclear, we help you make practical decisions before expensive mistakes happen.',
  },
  {
    code: 'S-05',
    title: 'Rescue Projects',
    copy: 'Stabilize, refactor, or relaunch software projects that are stuck.',
    bestFor: [
      'Half-built MVPs',
      'Failed agency projects',
      'Unstable production systems',
      'Slow teams',
      'Broken infrastructure',
      'AI prototypes that do not work outside demos',
    ],
    deliverables: [
      'Codebase assessment',
      'Architecture review',
      'Stabilization plan',
      'Deployment fixes',
      'Performance improvements',
      'Missing features',
      'Operational handover',
    ],
    closing: 'If a software project is stuck, unstable, or overcomplicated, we can step in, identify the real blockers, and move it back toward shipping.',
  },
];

function ServicesPage({ onNav }) {
  return (
    <div className="svc-page" data-screen-label="02 Services">
      <section className="page-hero">
        <div className="page-hero-inner">
          <div>
            <div className="eyebrow on-ink">SERVICES · OP-CATALOGUE</div>
            <h1>Services</h1>
            <p>From fast prototypes to AI workflows and production-ready platforms, OPTECH helps teams build serious software without slow agency overhead.</p>
            <button className="btn btn--signal" onClick={() => onNav('contact')}>Tell us about your project →</button>
          </div>
          <div className="page-hero-visual">
            <ServicesDiagram />
          </div>
        </div>
      </section>

      {SERVICES_DATA.map((s, i) => (
        <section className="service-block" key={s.code} data-screen-label={`02 Services / ${s.code}`}>
          <div className="service-inner">
            <div className="service-meta">
              <div className="code">{s.code} / SERVICE</div>
              <h2>{s.title}</h2>
              <p className="copy">{s.copy}</p>
            </div>
            <div>
              <div className="service-body">
                <div>
                  <h4>Best for</h4>
                  <ul>{s.bestFor.map(b => <li key={b}>{b}</li>)}</ul>
                </div>
                <div>
                  <h4>Deliverables</h4>
                  <ul>{s.deliverables.map(d => <li key={d}>{d}</li>)}</ul>
                </div>
              </div>
              <p className="service-closing">{s.closing}</p>
            </div>
          </div>
        </section>
      ))}

      <div className="cta-block">
        <div className="cta-block-inner">
          <div>
            <div className="eyebrow on-ink">OP-INTAKE</div>
            <h2>Need something specific?</h2>
          </div>
          <div>
            <p>The best projects usually start with a concrete problem, a messy workflow, or a clear technical bottleneck.</p>
            <button className="btn btn--signal" onClick={() => onNav('contact')}>Tell us about your project →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   WORK PAGE
   ============================================================ */
const WORK_CARDS = [
  { code: 'OP-024', vertical: 'agritech',   title: 'Agritech Operations Platform',     summary: 'Farm operations platform for managing agricultural activities, input usage, stock tracking, field-level planning, and decision support.', thumb: <ThumbAgritech /> },
  { code: 'OP-051', vertical: 'agritech',   title: 'Crop Intelligence Platform',       summary: 'Satellite-assisted crop intelligence supporting crop monitoring, productivity insights, risk assessment, and agricultural data analysis.', thumb: <ThumbCrop /> },
  { code: 'OP-031', vertical: 'automotive', title: 'Automotive Operations Platform',   summary: 'B2B platform for dealerships and repair shops, covering parts purchasing, scheduling, monitoring, and booking workflows.', thumb: <ThumbAutomotive /> },
  { code: 'OP-058', vertical: 'fintech',    title: 'Mobile Lending Platform',          summary: 'Mobile-first lending platform for a non-banking financial institution, enabling consumers to apply for, manage, and repay short-term loans.', thumb: <ThumbLending /> },
  { code: 'OP-042', vertical: 'compliance', title: 'Workplace Compliance System',      summary: 'Occupational health and safety platform for tracking yearly workplace checkups, employee training, and digital-signature workflows.', thumb: <ThumbCompliance /> },
  { code: 'OP-037', vertical: 'education',  title: 'Education Platform',               summary: 'Web and mobile learning platform supporting interactive lessons, remote learning, certifications, and student progress flows.', thumb: <ThumbEducation /> },
  { code: 'OP-063', vertical: 'marketplace',title: 'Short-Term Work Marketplace',      summary: 'Mobile-first marketplace connecting available workers with short-term gigs during a period of labor disruption.', thumb: <ThumbMarketplace /> },
  { code: 'OP-070', vertical: 'community',  title: 'Sports Membership Platform',       summary: 'Membership and governance platform for a major sports club, supporting paid memberships, loyalty points, voting, and supporter participation.', thumb: <ThumbSports /> },
  { code: 'OP-079', vertical: 'marketplace',title: 'Personalized Video Marketplace',   summary: 'Marketplace connecting fans with public figures for paid personalized video messages.', thumb: <ThumbVideo /> },
];

function WorkPage({ onNav, onOpenWork }) {
  return (
    <div data-screen-label="03 Work">
      <section className="page-hero">
        <div className="page-hero-inner">
          <div>
            <div className="eyebrow on-ink">WORK · OP-MANIFEST</div>
            <h1>Selected work</h1>
            <p>We build custom software for real workflows across product, operations, AI, infrastructure, and data-heavy environments.</p>
            <button className="btn btn--signal" onClick={() => onNav('contact')}>Tell us about your project →</button>
          </div>
          <div className="page-hero-visual">
            <WorkDiagram />
          </div>
        </div>
      </section>

      <section>
        <div className="section-inner">
          <div className="eyebrow">OP-MANIFEST · {WORK_CARDS.length.toString().padStart(2,'0')} ENTRIES</div>
          <h2 style={{ fontSize: 40, lineHeight: '44px', fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 40px', maxWidth: '20ch' }}>Anonymized projects, real systems.</h2>

          <div className="work-list">
            {WORK_CARDS.map(w => (
              <div key={w.code} className="work-row" onClick={() => onOpenWork(w)}>
                <div className="code">{w.code}</div>
                <div className="title">{w.title}</div>
                <div className="desc">{w.summary}</div>
                <div className="vert">{w.vertical}</div>
                <div className="arrow">→</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 48 }} className="mono-meta">
            * Client names, product names, company names, and logos intentionally withheld.
          </div>
        </div>
      </section>

      <div className="cta-block">
        <div className="cta-block-inner">
          <div>
            <div className="eyebrow on-ink">OP-INTAKE</div>
            <h2>Have a workflow that does not fit into <span className="accent">off-the-shelf</span> software?</h2>
          </div>
          <div>
            <p>We build bespoke systems for complex, specific, and operationally important problems.</p>
            <button className="btn btn--signal" onClick={() => onNav('contact')}>Tell us about your project →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Lightweight detail-card overlay (anonymized — no fake metrics) */
function WorkDetailOverlay({ data, onClose }) {
  React.useEffect(() => {
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onEsc);
    return () => document.removeEventListener('keydown', onEsc);
  }, [onClose]);
  if (!data) return null;
  return (
    <div
      style={{
        position: 'fixed', inset: 0, background: 'rgba(10,10,11,0.75)', zIndex: 100,
        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32,
      }}
      onClick={onClose}
    >
      <div
        style={{
          background: 'var(--paper)', border: '1px solid var(--ink)', maxWidth: 720,
          width: '100%', padding: 48, maxHeight: '85vh', overflowY: 'auto'
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="mono-meta" style={{ marginBottom: 8, cursor: 'pointer' }} onClick={onClose}>← CLOSE / OP-MANIFEST</div>
        <div className="eyebrow">{data.code} · {data.vertical.toUpperCase()}</div>
        <h2 style={{ fontSize: 44, lineHeight: '48px', fontWeight: 600, letterSpacing: '-0.025em', margin: '8px 0 24px', textWrap: 'pretty' }}>{data.title}</h2>
        <div style={{ height: 160, border: '1px solid var(--rule)', background: 'var(--paper-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 32 }}>
          <div style={{ width: '90%' }}>{data.thumb}</div>
        </div>
        <p style={{ fontSize: 17, lineHeight: '28px', color: 'var(--ink)', margin: 0, maxWidth: '54ch' }}>{data.summary}</p>
        <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--rule)' }} className="mono-meta">
          ● ANONYMIZED · CLIENT, PRODUCT, AND BRAND NAMES WITHHELD
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
function AboutPage({ onNav }) {
  return (
    <div data-screen-label="04 About">
      <section className="page-hero">
        <div className="page-hero-inner">
          <div>
            <div className="eyebrow on-ink">ABOUT · OP-DOSSIER</div>
            <h1>About <span className="accent">OPTECH</span></h1>
            <p>OPTECH is a senior engineering-led product company focused on fast prototypes, bespoke software, and AI-enabled systems.</p>
          </div>
          <div className="page-hero-visual">
            <AboutDiagram />
          </div>
        </div>
      </section>

      <section>
        <div className="about-prose">
          <div className="meta">
            OP-DOSSIER<br/>
            ─────<br/>
            EST. - operating today<br/>
            EU · selective international<br/>
            Cloud · hybrid · private<br/>
            Remote-first
          </div>
          <div className="body">
            <p>OPTECH is built for teams that need high-quality software shipped quickly. We work with startups and SMEs across the EU and selective international markets, helping them prototype, build, and deploy custom software systems across product, AI, data, and infrastructure.</p>
            <p>We are especially useful when the problem is not perfectly defined, the workflow is specific to the business, or the solution needs to connect multiple systems, users, and data sources. Our approach is prototype-first, practical, and production-minded.</p>
          </div>
        </div>
      </section>

      <section className="section--principles" style={{ background: 'var(--paper-2)' }}>
        <div className="section-inner">
          <div className="section-header">
            <div>
              <div className="eyebrow">HOW WE THINK · OP-PRINCIPLES</div>
              <h2>How we think</h2>
            </div>
            <p>Five working principles that shape how we scope problems, prototype solutions, and put software into production.</p>
          </div>
        </div>
        <div className="principles-grid-wrap">
          <div className="principles-grid">
            {[
              ['01', 'Working software beats theoretical plans', 'We move quickly toward something usable, then improve it through real feedback.'],
              ['02', 'AI should be connected to real workflows', 'We build AI systems that interact with tools, data, processes, and people, not isolated demos.'],
              ['03', 'Bespoke means understanding the messy parts', 'We are comfortable with domain-specific workflows, legacy constraints, unclear requirements, and operational complexity.'],
              ['04', 'Fast does not mean disposable', 'We prototype quickly, but with enough technical judgment to avoid dead ends.'],
              ['05', 'Deployment matters', 'A system is only useful when it can run reliably, securely, and observably in the right environment.'],
            ].map(([n, h, p]) => (
              <div className="cell" key={n}>
                <div className="num">{n} / PRINCIPLE</div>
                <h3>{h}</h3>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <div className="cta-block">
        <div className="cta-block-inner">
          <div>
            <div className="eyebrow on-ink">OP-INTAKE</div>
            <h2>Looking for a practical <span className="accent">technical partner?</span></h2>{/* */}
          </div>
          <div>
            <p>Tell us about the problem, the workflow, or the system you have in mind. We respond fast and we are honest about fit.</p>
            <button className="btn btn--signal" onClick={() => onNav('contact')}>Tell us about your project →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
function ContactPage() {
  const [form, setForm] = useStateP({
    name: '', company: '', email: '',
    type: 'Not sure yet', budget: '€25k – €75k', timeline: '4 – 8 weeks',
    build: '', stage: '', notes: ''
  });
  const [sent, setSent] = useStateP(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); window.scrollTo(0, 0); };

  return (
    <div data-screen-label="05 Contact">
      <section className="page-hero">
        <div className="page-hero-inner">
          <div>
            <div className="eyebrow on-ink">CONTACT · OP-INTAKE</div>
            <h1>Tell us about your project</h1>
            <p>Share what you are trying to build, automate, fix, or validate. We will help you think through the fastest practical path to working software.</p>
          </div>
          <div className="page-hero-visual">
            <ContactDiagram />
          </div>
        </div>
      </section>

      <section>
        <div className="contact-layout">
          {sent ? (
            <div className="sent-card">
              <div className="eyebrow">● RECEIVED · OP-INTAKE/2026-{Math.floor(Math.random() * 9000 + 1000)}</div>
              <h3>Got it. We will reply within a working day.</h3>
              <p>If we are a good fit, the next step is a short scoping conversation. If we are not, we will say so plainly, and usually point you toward someone who is.</p>
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit}>
              <div className="field-row">
                <div className="field">
                  <span className="lbl">NAME</span>
                  <input required value={form.name} onChange={set('name')} placeholder="Your full name" />
                </div>
                <div className="field">
                  <span className="lbl">COMPANY</span>
                  <input value={form.company} onChange={set('company')} placeholder="Company or team" />
                </div>
              </div>

              <div className="field">
                <span className="lbl">EMAIL</span>
                <input type="email" required value={form.email} onChange={set('email')} placeholder="you@company.com" />
              </div>

              <div className="field-row">
                <div className="field">
                  <span className="lbl">PROJECT TYPE</span>
                  <select value={form.type} onChange={set('type')}>
                    <option>Prototype or MVP</option>
                    <option>AI workflow automation</option>
                    <option>Bespoke software platform</option>
                    <option>Technical advisory</option>
                    <option>Rescue project</option>
                    <option>Infrastructure or deployment</option>
                    <option>Not sure yet</option>
                  </select>
                </div>
                <div className="field">
                  <span className="lbl">BUDGET RANGE</span>
                  <select value={form.budget} onChange={set('budget')}>
                    <option>€25k – €75k</option>
                    <option>€75k – €150k</option>
                    <option>€150k – €300k</option>
                    <option>€300k+</option>
                    <option>Not sure yet</option>
                  </select>
                </div>
              </div>

              <div className="field">
                <span className="lbl">TIMELINE</span>
                <select value={form.timeline} onChange={set('timeline')}>
                  <option>ASAP (within 2 weeks)</option>
                  <option>4 – 8 weeks</option>
                  <option>1 – 3 months</option>
                  <option>3 – 6 months</option>
                  <option>Flexible / exploratory</option>
                </select>
              </div>

              <div className="field">
                <span className="lbl">WHAT ARE YOU TRYING TO BUILD?</span>
                <textarea required value={form.build} onChange={set('build')} placeholder="Briefly describe the system, workflow, product, or problem." />
              </div>

              <div className="field">
                <span className="lbl">WHAT IS THE CURRENT STAGE?</span>
                <textarea value={form.stage} onChange={set('stage')} placeholder="Idea, sketch, existing code, half-built MVP, production system, etc." />
              </div>

              <div className="field">
                <span className="lbl">ANYTHING ELSE WE SHOULD KNOW?</span>
                <textarea value={form.notes} onChange={set('notes')} placeholder="Constraints, deadlines, internal team, deployment requirements, etc." />
              </div>

              <div className="form-foot">
                <button type="submit" className="btn btn--ink">Send to OPTECH →</button>
                <span className="note">● REPLY WITHIN A WORKING DAY</span>
              </div>
            </form>
          )}

          <aside className="contact-side">
            <h4>WHAT TO EXPECT</h4>
            <div className="item">
              <span className="n">01 /</span>
              <div>
                <div className="t">Reply within a working day.</div>
                <div className="d">Usually same day. We read every message and respond in plain text. No auto-responder loops.</div>
              </div>
            </div>
            <div className="item">
              <span className="n">02 /</span>
              <div>
                <div className="t">Short scoping conversation.</div>
                <div className="d">We ask for problem context, constraints, and goals. We do not need a polished brief. Rough is fine.</div>
              </div>
            </div>
            <div className="item">
              <span className="n">03 /</span>
              <div>
                <div className="t">A concrete proposal.</div>
                <div className="d">Either a Prototype Sprint, a full build plan, or a recommendation to start somewhere else. We say so plainly.</div>
              </div>
            </div>
            <div className="item">
              <span className="n">04 /</span>
              <div>
                <div className="t">Working software.</div>
                <div className="d">From there it is execution. We move quickly, share progress, and deploy real systems.</div>
              </div>
            </div>

            <div className="quote">
              We are best suited for projects where technical execution, speed, and long-term maintainability all matter.
            </div>
            <div className="quote" style={{ marginTop: 16, paddingTop: 16 }}>
              The best starting point is a clear problem, rough idea, existing workflow, or technical bottleneck.
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  HomePage, ServicesPage, WorkPage, AboutPage, ContactPage,
  WorkDetailOverlay, WORK_CARDS, SERVICES_DATA,
});