/* global React, Icon */
const { useState: useStateC2 } = React;

const featureCards = [
  ["Credentials set the boundary", "Associations and standards bodies can issue digital credentials to agents, experts, and firms before they operate in a POD.", "Credential gate"],
  ["Clients get a private room", "Matrix-based encrypted spaces support consultations, document sharing, transcripts, summaries, and sovereign data storage.", "Private space"],
  ["Agents have a job description", "The Qi Intelligent Cooperating System gives agents scoped roles for intake, drafting, evidence checks, routing, and recommendations.", "Agent scope"],
  ["Professionals stay client-facing", "Service providers own the relationship, live support, assurance, and final calls that require judgment.", "Warm assurance"],
  ["Indemnity still matters", "PODs preserve the client-service provider relationship so professional indemnity cover can sit around the accountable service.", "Cover model"],
  ["Value can settle automatically", "Mostly prepaid outcome payments can settle with auditable accounting records and integrations into the firm's legacy finance stack.", "Value flow"]
];

const GovernanceFeatures = () => (
  <section className="feature-section">
    <div className="page-grid">
      <div className="section-heading reveal">
        <p className="eyebrow">Controls without the theater</p>
        <h2>The point is not more compliance language. It is a service you can stand behind.</h2>
      </div>
      <div className="feature-grid">
        {featureCards.map(([title, body, marker], index) => (
          <article className="feature-card reveal" style={{ "--i": index }} key={title}>
            <div className="feature-icon"><Icon name={["evidence", "permission", "agent", "authority", "human", "settlement"][index]} /></div>
            <span>{marker}</span>
            <h3>{title}</h3>
            <p>{body}</p>
            <small>{index % 2 ? "Policy visible at every gate" : "Evidence retained by default"}</small>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const BoundarySection = () => {
  const agents = ["Intake", "Classification", "Summarization", "Evidence checks", "Transcript summaries", "Template-based drafts"];
  const experts = ["Client relationship", "Video consultations", "Client context", "Regulated advice", "Exception handling", "Professional assurance"];
  return (
    <section className="boundary-section">
      <div className="page-grid">
        <div className="section-heading reveal">
          <p className="eyebrow">The line that matters</p>
          <h2>Let agents do the grind. Build your relationships, assurance, and trust.</h2>
        </div>
        <div className="boundary-model reveal delay-1">
          <div className="boundary-col">
            <h3>Agents assist</h3>
            {agents.map((item) => <p key={item}>{item}</p>)}
          </div>
          <div className="rules-core">
            <Icon name="blueprint" size={28} />
            <strong>Blueprint rules</strong>
            <span>What agents can do, which credentials are required, when experts step in, and what proof the client receives</span>
          </div>
          <div className="boundary-col expert">
            <h3>Experts decide</h3>
            {experts.map((item) => <p key={item}>{item}</p>)}
          </div>
        </div>
      </div>
    </section>
  );
};

const marketplaceCategories = [
  "Impact and Assurance",
  "ESG and Sustainability",
  "Legal and Compliance",
  "Accounting and Finance",
  "Wealth and Advice",
  "Management Support",
  "Grants and Claims",
  "Public Health Intelligence",
  "Association-Certified Blueprints"
];

const MarketplacePreview = () => (
  <section id="marketplace" className="marketplace-section">
    <div className="page-grid">
      <div className="section-heading reveal">
        <p className="eyebrow">Marketplace</p>
        <h2>Sell the result, not the hours.</h2>
      </div>
      <div className="marketplace-shell reveal delay-1">
        <div className="search-box">
          <Icon name="search" />
          <span>What outcome should a client be able to buy?</span>
        </div>
        <div className="category-row">
          {marketplaceCategories.map((item) => <button type="button" key={item}>{item}</button>)}
        </div>
        <div className="market-card-grid">
          {blueprints.slice(0, 4).map((blueprint) => <MarketplaceCard key={blueprint.title} blueprint={blueprint} />)}
        </div>
      </div>
    </div>
  </section>
);

const MarketplaceCard = ({ blueprint }) => (
  <article className="market-card">
    <span>{blueprint.domain}</span>
    <h3>{blueprint.title}</h3>
    <p>{blueprint.outcome}</p>
    <div className="market-meta">
      <small>Review: {blueprint.review}</small>
      <small>Pricing: {blueprint.pricing}</small>
    </div>
    <a href="#contact">Explore in a Design POD <Icon name="arrow" size={14} /></a>
  </article>
);

const blueprints = [
  { title: "Wealth Plan Review", domain: "Wealth and Advice", outcome: "Run a private advice POD with consultation notes, client-controlled documents, assumptions, options, risks, and adviser sign-off.", review: "Credentialed financial adviser", pricing: "Prepaid, then settled on accepted plan" },
  { title: "AI Enablement Plan", domain: "Management Support", outcome: "Map where a firm should use agents, which services become Blueprints, what governance is required, and how teams adopt AI without losing client trust.", review: "Management consultant", pricing: "Blueprint sprint" },
  { title: "Impact Verification", domain: "Impact and Assurance", outcome: "Verify impact claims with structured evidence, expert review, and recorded determinations.", review: "Verifier", pricing: "Per claim" },
  { title: "ESG Evidence Pack", domain: "ESG and Sustainability", outcome: "Prepare ESG evidence packs, reporting workpapers, and disclosure drafts.", review: "Partner", pricing: "Per report" },
  { title: "Contract Review", domain: "Legal and Compliance", outcome: "Review, redline, risk-score, and route contracts for decision.", review: "Lawyer", pricing: "Per matter" },
  { title: "Claims and Grants", domain: "Grants and Claims", outcome: "Assess applications, check eligibility, manage appeals, and settle approved outcomes.", review: "Program officer", pricing: "Per award" },
  { title: "Accounting Close", domain: "Accounting and Finance", outcome: "Support monthly close, reconciliations, variance notes, and reporting workflows.", review: "Accountant", pricing: "Per close" },
  { title: "Public Health Intelligence", domain: "Public Health Intelligence", outcome: "Coordinate secure evidence, analysis, and review workflows across expert institutions.", review: "Clinical lead", pricing: "Program" }
];

const UseCases = () => (
  <section className="usecase-section">
    <div className="page-grid">
      <div className="section-heading reveal">
        <p className="eyebrow">Where this gets real</p>
        <h2>Start where clients already pay for judgment.</h2>
      </div>
      <div className="usecase-grid">
        {useCases.map((item, index) => (
          <article className="usecase-card reveal" style={{ "--i": index }} key={item.title}>
            <span>{item.title}</span>
            <h3>{item.outcome}</h3>
            <dl>
              <div><dt>Agent role</dt><dd>{item.agent}</dd></div>
              <div><dt>Expert role</dt><dd>{item.expert}</dd></div>
            </dl>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const useCases = [
  { title: "Wealth Plan Review", outcome: "Give clients a private advice POD where documents, consultation transcripts, assumptions, risk flags, and final recommendations stay connected.", agent: "Organize fact-find data, compare scenarios, flag missing evidence, draft the file note and consultation summary from the firm's template.", expert: "Own the relationship, conduct live consultations, judge suitability, explain trade-offs, and sign the recommendation." },
  { title: "Impact Verification", outcome: "Verify impact claims with structured evidence, expert review, and recorded determinations.", agent: "Evidence checks, anomaly flags, rubric support, claim summaries.", expert: "Verifier judgment for material, disputed, or high-value claims." },
  { title: "ESG Reporting", outcome: "Prepare ESG evidence packs, reporting workpapers, and disclosure drafts.", agent: "Map source evidence to reporting requirements and identify gaps.", expert: "Review materiality, methodology, risk, and final disclosure quality." },
  { title: "Contract Review", outcome: "Review, redline, risk-score, and route contracts for decision.", agent: "Extract clauses, compare against playbooks, flag deviations, draft summaries.", expert: "Lawyer review for legal judgment, negotiation strategy, and final advice." },
  { title: "Claims and Grants", outcome: "Assess applications, check eligibility, review evidence, manage appeals, and settle approved outcomes.", agent: "Triage submissions, check completeness, summarize evidence, flag risk.", expert: "Program officer review for exceptions, appeals, fraud concerns, and final awards." },
  { title: "Accounting Close", outcome: "Support monthly close, reconciliations, variance notes, and reporting workflows.", agent: "Classify transactions, identify exceptions, prepare draft workpapers.", expert: "Accountant review for exceptions, treatment, compliance, and final reporting." }
];

Object.assign(window, { GovernanceFeatures, BoundarySection, MarketplacePreview, UseCases });