/* global React */
const { useEffect: useEffectC1, useState: useStateC1 } = React;

const Icon = ({ name, size = 20 }) => {
  const stroke = "currentColor";
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" };
  const paths = {
    blueprint: <><path d="M4 5h16v14H4z" /><path d="M8 5v14M4 10h16M12 10v9" /></>,
    method: <><path d="M6 4h9l3 3v13H6z" /><path d="M15 4v4h4" /><path d="M9 12h6M9 16h4" /><path d="m15 18 2 2 4-5" /></>,
    agent: <><path d="M5 6h14v12H5z" /><path d="M9 10h.01M15 10h.01M9 14h6" /><path d="M12 3v3" /></>,
    human: <><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" /><path d="M4 21a8 8 0 0 1 16 0" /><path d="m16 15 2 2 4-4" /></>,
    evidence: <><path d="M6 3h9l3 3v15H6z" /><path d="M15 3v4h4" /><path d="M9 11h6M9 15h6M9 19h3" /></>,
    authority: <><path d="M12 2 4 5v6c0 5.2 3.4 9.2 8 11 4.6-1.8 8-5.8 8-11V5z" /><path d="m9 12 2 2 4-5" /></>,
    settlement: <><circle cx="12" cy="12" r="8" /><path d="M8 12h8M12 8v8" /></>,
    permission: <><path d="M8 11V8a4 4 0 0 1 8 0v3" /><path d="M6 11h12v10H6z" /></>,
    check: <><path d="m5 13 4 4L19 7" /></>,
    arrow: <><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="m16 16 4 4" /></>,
    menu: <><path d="M4 7h16M4 12h16M4 17h16" /></>,
    close: <><path d="m6 6 12 12M18 6 6 18" /></>,
    mail: <><path d="M4 6h16v12H4z" /><path d="m4 7 8 6 8-6" /></>,
    building: <><path d="M4 21h16M6 21V4h12v17" /><path d="M9 8h1M14 8h1M9 12h1M14 12h1M9 16h1M14 16h1" /></>
  };
  return <svg {...common}>{paths[name] || paths.check}</svg>;
};

const QiBrand = () => (
  <>
    <span className="brand-mark brand-mark-qi"><img src="qi-new.png" alt="" /></span>
  </>
);

const navItems = [
  ["PODs", "#pods"],
  ["Service Blueprints", "#blueprints"],
  ["Marketplace", "#marketplace"],
  ["Assurance", "#assurance"],
  ["Partners", "#partners"],
  ["Design POD", "#contact"]
];

const Header = () => {
  const [scrolled, setScrolled] = useStateC1(false);
  const [open, setOpen] = useStateC1(false);

  useEffectC1(() => {
    const onScroll = () => setScrolled(window.scrollY > 18);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={`site-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="nav-shell">
        <a className="brand" href="#top" aria-label="Qi PODs home">
          <QiBrand />
          <span className="brand-sub">PODs</span>
        </a>
        <nav className="desktop-nav" aria-label="Primary">
          {navItems.map(([label, href]) => <a key={label} href={href}>{label}</a>)}
        </nav>
        <div className="nav-actions">
          <a className="btn btn-quiet" href="#marketplace">Explore Blueprints</a>
          <a className="btn btn-primary" href="#contact">Join a Design POD <Icon name="arrow" size={16} /></a>
          <button className="icon-button mobile-menu-button" type="button" onClick={() => setOpen(true)} aria-label="Open menu"><Icon name="menu" /></button>
        </div>
      </div>
      <div className={`mobile-panel ${open ? "is-open" : ""}`} aria-hidden={!open}>
        <button className="icon-button mobile-close" type="button" onClick={() => setOpen(false)} aria-label="Close menu"><Icon name="close" /></button>
        <a className="brand mobile-brand" href="#top" onClick={() => setOpen(false)}>
          <QiBrand /><span className="brand-sub">PODs</span>
        </a>
        {navItems.map(([label, href]) => <a key={label} href={href} onClick={() => setOpen(false)}>{label}</a>)}
        <a className="btn btn-primary" href="#contact" onClick={() => setOpen(false)}>Join a Design POD</a>
      </div>
    </header>
  );
};

const FlowDiagram = () => {
  const steps = [
    ["Expert Method", "method"],
    ["Service Blueprint", "blueprint"],
    ["Agent Assistance", "agent"],
    ["Expert Review", "human"],
    ["Evidence Record", "evidence"],
    ["Outcome Delivered", "check"],
    ["Settlement", "settlement"]
  ];
  return (
    <div className="hero-diagram flow-diagram" aria-label="Hero service flow diagram">
      <div className="diagram-header">
        <span>Service flow</span>
        <strong>Blueprint-controlled delivery</strong>
      </div>
      <div className="flow-body">
        <div className="flow-line" />
        {steps.map(([label, icon], index) => (
          <div className="flow-node" style={{ "--i": index }} key={label}>
            <div className="node-icon"><Icon name={icon} size={18} /></div>
            <span>{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const PodDiagram = () => {
  const modules = [
    ["People", "Named experts and clients", "human"],
    ["Agents", "Scoped assistance", "agent"],
    ["Evidence", "Source-backed records", "evidence"],
    ["Workflows", "Service gates", "blueprint"],
    ["Permissions", "Access and authority", "permission"],
    ["Credentials", "Qualified sign-off", "authority"],
    ["Settlement", "Outcome value flow", "settlement"],
    ["Marketplace", "Reusable delivery", "building"]
  ];
  return (
    <div className="hero-diagram pod-diagram" aria-label="POD structure diagram">
      <div className="pod-diagram-field" />
      <div className="pod-system-label">
        <span>Qi POD</span>
        <strong>Trusted expertise deployment environment</strong>
      </div>
      <div className="pod-core-wrap">
        <div className="pod-core">
          <span>Service Blueprint</span>
          <strong>Outcome logic</strong>
          <small>scope · roles · evidence · review · pricing</small>
        </div>
        <div className="pod-band pod-band-top">
          <span>Governance</span>
          <span>Permissions</span>
          <span>Human review</span>
        </div>
        <div className="pod-band pod-band-bottom">
          <span>Evidence trail</span>
          <span>Determination</span>
          <span>Settlement</span>
        </div>
        <div className="pod-kernel-line horizontal" />
        <div className="pod-kernel-line vertical" />
      </div>
      <div className="pod-module-grid">
        {modules.map(([title, body, icon], index) => (
          <div className="pod-module" style={{ "--i": index }} key={title}>
            <div className="pod-module-icon"><Icon name={icon} size={17} /></div>
            <div>
              <strong>{title}</strong>
              <span>{body}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const ServiceEnvironmentDiagram = () => {
  const agentTasks = ["Evidence checks", "Client summary", "Draft workpaper"];
  const reviewSteps = ["Credentialed expert", "Indemnity cover", "Outcome sign-off"];
  const settlementSteps = ["Prepaid escrow", "Accepted outcome", "Accounting sync"];
  return (
    <div className="service-room" aria-label="Secure professional service POD diagram">
      <div className="service-room-atmosphere" />
      <div className="service-room-header">
        <span>Design POD</span>
        <strong>Secure client-service environment</strong>
      </div>
      <div className="service-room-core">
        <div className="client-room-panel">
          <span className="panel-chip">Private Matrix room</span>
          <h3>Client consultation</h3>
          <p>Encrypted video, documents, transcripts, and summaries stay inside a client-controlled POD.</p>
          <div className="consultation-row">
            <div className="avatar-tile advisor"><Icon name="human" size={18} /><span>Advisor</span></div>
            <div className="live-link"><span />Live assurance</div>
            <div className="avatar-tile client"><Icon name="permission" size={18} /><span>Client</span></div>
          </div>
        </div>
        <div className="service-side">
          <div className="blueprint-orbit">
            <span>Service Blueprint</span>
            <strong>scope · roles · evidence · review · price</strong>
          </div>
          <div className="evidence-stack">
            <div><Icon name="evidence" size={17} /><span>Source evidence</span></div>
            <div><Icon name="blueprint" size={17} /><span>Custom templates</span></div>
            <div><Icon name="authority" size={17} /><span>Association standard</span></div>
          </div>
          <div className="credential-seal">
            <Icon name="authority" size={20} />
            <span>Digital credentials</span>
            <strong>Firm · Expert · Agent</strong>
          </div>
        </div>
      </div>
      <div className="service-rails">
        <div className="service-rail agent-rail">
          <span>Credentialed agents</span>
          {agentTasks.map((task) => <strong key={task}>{task}</strong>)}
        </div>
        <div className="service-rail review-rail">
          <span>Professional assurance</span>
          {reviewSteps.map((step) => <strong key={step}>{step}</strong>)}
        </div>
        <div className="service-rail settlement-rail">
          <span>Guaranteed settlement</span>
          {settlementSteps.map((step) => <strong key={step}>{step}</strong>)}
        </div>
      </div>
    </div>
  );
};

const TrailDiagram = () => {
  const steps = ["Identity", "Authority", "Evidence", "Review", "Determination", "Settlement"];
  return (
    <div className="hero-diagram assurance-diagram" aria-label="Assurance trail diagram">
      <div className="diagram-header">
        <span>Assurance trail</span>
        <strong>Every outcome carries a structured record</strong>
      </div>
      <div className="audit-rail">
        {steps.map((step, index) => (
          <div className="audit-step" style={{ "--i": index }} key={step}>
            <span>{String(index + 1).padStart(2, "0")}</span>
            <strong>{step}</strong>
          </div>
        ))}
      </div>
    </div>
  );
};

const Hero = ({ variant }) => (
  <section id="top" className="hero">
    <div className="hero-field" />
    <div className="hero-grid page-grid">
      <div className="hero-copy reveal is-visible">
        <p className="eyebrow light">Qi PODs</p>
        <h1>Design <em>your role</em> in the agentic economy</h1>
        <p className="hero-sub">AI can copy tasks. It cannot own judgment, trust, accountability, or the client relationship. Qi PODs give professionals a secure virtual service room where agents help, clients stay in control of their data, and qualified people stand behind the outcome.</p>
        <div className="button-row">
          <a className="btn btn-primary btn-light" href="#contact">Join a Design POD <Icon name="arrow" size={16} /></a>
          <a className="btn btn-secondary-dark" href="#marketplace">Explore Service Blueprints</a>
        </div>
        <p className="trust-line">For advisors, specialists, firms, and associations who want AI-enabled services without surrendering standards, client trust, or professional assurance.</p>
      </div>
      <div className="hero-visual reveal is-visible delay-1">
        <ServiceEnvironmentDiagram />
      </div>
    </div>
  </section>
);

const AudienceIntro = () => (
  <section className="intro-section">
    <div className="section-grid page-grid">
      <div className="section-kicker reveal">
        <p className="eyebrow">The honest problem</p>
        <p>Clients are asking why expert work still costs so much when AI can draft, summarize, and compare in seconds.</p>
      </div>
      <div className="section-copy reveal delay-1">
        <h2>The answer is not to become cheaper software.</h2>
        <p>The answer is to make your judgment, method, standards, and client promises explicit. A POD lets agents handle repeatable work inside a private client-service space while the professional owns the relationship, assurance, and final advice.</p>
      </div>
    </div>
  </section>
);

const OutcomeShift = () => {
  const oldWay = ["AI tools scattered across the workflow", "Experts checking machine output after hours", "Junior work compressed with no better path up", "Unclear accountability when advice is wrong", "Fees still tied to time spent", "Trust explained in emails after the fact"];
  const newWay = ["Your method becomes the service architecture", "Agents do bounded work inside credentialed rules", "Clients meet professionals in a secure private POD", "Judgment points are named before work starts", "Fees can settle against accepted outcomes", "Trust is visible in credentials, insurance, and evidence"];
  return (
    <section className="shift-section">
      <div className="page-grid">
        <div className="section-heading reveal">
          <p className="eyebrow">The shift</p>
          <h2>From fear of replacement to a better job to own.</h2>
        </div>
        <div className="contrast-grid">
          <div className="contrast-panel muted reveal delay-1">
            <span className="panel-label">What feels threatening</span>
            {oldWay.map((item) => <p key={item}>{item}</p>)}
          </div>
          <div className="contrast-panel strong reveal delay-2">
            <span className="panel-label">What changes with PODs</span>
            {newWay.map((item) => <p key={item}>{item}</p>)}
          </div>
        </div>
      </div>
    </section>
  );
};

const WhatIsPod = () => {
  const layers = [
    ["Professional assurance", "The provider owns the client relationship, live support, final advice, and assurance."],
    ["Private client space", "Matrix-based rooms support consultations, document sharing, encrypted transcripts, and sovereign storage."],
    ["Credentials", "Associations set standards and issue digital credentials to firms, experts, and agents."],
    ["Commercial model", "Outcome payments can be prepaid, auditable, and reconciled into legacy accounting systems."]
  ];
  return (
    <section id="pods" className="pod-section">
      <div className="section-grid page-grid">
        <div className="section-copy reveal">
          <p className="eyebrow">What is a Qi POD?</p>
          <h2>A working system around your expertise</h2>
          <p>A POD is a secure virtual service environment. Clients consult with real professionals, share documents privately, retain control over their data, and receive outcomes backed by credentials, evidence, professional assurance, and settlement records.</p>
        </div>
        <div className="structure-card reveal delay-1">
          <PodDiagram />
        </div>
      </div>
      <div className="page-grid layer-grid">
        {layers.map(([title, body], index) => (
          <article className="layer-card reveal" style={{ "--i": index }} key={title}>
            <span>{String(index + 1).padStart(2, "0")}</span>
            <h3>{title}</h3>
            <p>{body}</p>
          </article>
        ))}
      </div>
    </section>
  );
};

const BlueprintSection = () => (
  <section id="blueprints" className="blueprint-section">
    <div className="section-grid page-grid">
      <div className="section-copy reveal">
        <p className="eyebrow">Service Blueprints</p>
        <h2>Turn your way of working into something others can trust.</h2>
        <p>A Service Blueprint is your method written as an operating model: what outcome you promise, what credentials are required, what agents may do, when humans decide, what evidence is needed, how client interactions are recorded, and how the service gets paid.</p>
      </div>
      <BlueprintCard />
    </div>
  </section>
);

const BlueprintCard = () => (
  <article className="blueprint-card reveal delay-1">
    <div className="blueprint-top">
      <span className="status status-reviewed">Expert-reviewed</span>
      <span className="status status-evidence">Evidence-backed</span>
      <span className="status status-settlement">Outcome-priced</span>
    </div>
    <h3>Impact Verification POD</h3>
    <dl className="meta-list">
      <div><dt>Outcome</dt><dd>Impact claims reviewed and determined</dd></div>
      <div><dt>Agent role</dt><dd>Evidence checks, anomaly flags, rubric support</dd></div>
      <div><dt>Human review</dt><dd>Credentialed professional sign-off for material, high-value, or disputed claims</dd></div>
      <div><dt>Evidence</dt><dd>Project data, attestations, measurements, reports</dd></div>
      <div><dt>Pricing</dt><dd>Mostly prepaid, with guaranteed settlement on accepted outcome</dd></div>
      <div><dt>Assurance</dt><dd>Credentials, indemnity cover, evidence, determination, settlement</dd></div>
    </dl>
    <a className="inline-link" href="#contact">Explore this in a Design POD <Icon name="arrow" size={15} /></a>
  </article>
);

const DeploymentFlow = () => {
  const steps = ["Request submitted", "Authority checked", "Evidence collected", "Agent review", "Expert judgment", "Determination recorded", "Outcome accepted", "Payment settled"];
  return (
    <section id="assurance" className="trail-section">
      <div className="page-grid">
        <div className="section-heading reveal">
          <p className="eyebrow light">Assurance trail</p>
          <h2>If AI touched the work, show who stood behind it.</h2>
          <p>Every important step can show who requested it, what credentials were relied on, what evidence was used, what the agent did, where the expert intervened, and what outcome was accepted.</p>
        </div>
        <div className="timeline">
          {steps.map((step, index) => (
            <div className="trail-step" style={{ "--i": index }} key={step}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <strong>{step}</strong>
              <p>{trailDescriptions[index]}</p>
            </div>
          ))}
        </div>
        <p className="proof-line reveal">Agents make the work faster. Evidence makes it defensible. Your professional judgment makes it worth buying.</p>
      </div>
    </section>
  );
};

const trailDescriptions = [
  "The client enters a private Matrix-based service room.",
  "Credentials, permissions, insurance context, and authority are checked before work begins.",
  "Required source records are assembled against the Blueprint.",
  "Agents summarize, classify, inspect, and flag exceptions.",
  "Professionals consult, interpret, decide, approve, or request remediation.",
  "The reasoning, evidence, and responsible actor are retained.",
  "The client accepts the professional outcome or raises a dispute.",
  "Prepaid commercial rules trigger guaranteed settlement, accounting records, or next workflow."
];

Object.assign(window, { Header, Hero, AudienceIntro, OutcomeShift, WhatIsPod, BlueprintSection, DeploymentFlow, Icon, QiBrand });