/* ============================================================
   F2 UI — Marketing / website stories (full-bleed blocks)
   ============================================================ */
(function () {
  const F2 = window.F2;
  const { Navbar, Hero, FeatureGrid, Pricing, Testimonial, CTASection, LogoCloud, FAQ, Footer } = F2;
  const G = 'Marketing';

  /* ---------------- Navbar ---------------- */
  window.story({
    id: 'navbar', group: G, name: 'Navbar', status: 'new', fill: true, align: 'start', minH: 160,
    tagline: 'The marketing site header — F2 lockup, centered links, sign-in and a primary CTA.',
    importLine: "const { Navbar } = F2;",
    keywords: ['nav', 'header', 'marketing', 'website'],
    props: [
      { name: 'links', type: 'string[]', default: "['Product','Methodology','Work','Pricing']", description: 'Center nav links.' },
      { name: 'cta', type: 'string', default: 'Start a project', control: 'text', description: 'Primary button label.' },
    ],
    render: (v) => <Navbar cta={v.cta} />,
    code: (v) => `<Navbar\n  links={['Product', 'Methodology', 'Work', 'Pricing']}\n  cta="${v.cta}"\n/>`,
    a11y: ['Rendered as a <code>&lt;header&gt;</code> with a <code>&lt;nav&gt;</code>; the CTA is the single primary action.', 'Links are real anchors — keyboard and screen-reader navigable.'],
  });

  /* ---------------- Hero ---------------- */
  window.story({
    id: 'hero', group: G, name: 'Hero', status: 'new', fill: true, align: 'start', minH: 520,
    tagline: 'The opening statement — mono eyebrow, tight display headline, anti-hype subcopy, dual CTAs, and a live house-style agent diagram.',
    importLine: "const { Hero } = F2;",
    keywords: ['hero', 'landing', 'headline', 'above the fold'],
    props: [
      { name: 'eyebrow', type: 'string', default: 'AI automation studio', control: 'text', description: 'Mono kicker above the headline.' },
      { name: 'title', type: 'string', default: 'Automation, engineered to fit.', control: 'text', description: 'Display headline.' },
      { name: 'subtitle', type: 'string', description: 'Supporting paragraph.' },
      { name: 'primaryCta', type: 'string', default: 'Start a project', control: 'text', description: 'Primary button label.' },
      { name: 'secondaryCta', type: 'string', default: 'See the work', control: 'text', description: 'Secondary button label.' },
      { name: 'aside', type: "'diagram' | ReactNode", default: 'diagram', description: "Visual on the right; 'diagram' renders the live agent flow." },
    ],
    render: (v) => <Hero eyebrow={v.eyebrow} title={v.title} primaryCta={v.primaryCta} secondaryCta={v.secondaryCta} />,
    code: (v) => `<Hero\n  eyebrow="${v.eyebrow}"\n  title="${v.title}"\n  primaryCta="${v.primaryCta}"\n  secondaryCta="${v.secondaryCta}"\n  aside="diagram"\n/>`,
    a11y: ['One <code>&lt;h1&gt;</code> per page — the headline. Keep the subcopy concise and specific (no hype).', 'The diagram aside is illustrative; the value proposition lives in the heading + copy.'],
    notes: 'Voice follows the F2 manual: calm, precise, anti-hype. Lead with the measurable result, drop the adjectives.',
  });

  /* ---------------- FeatureGrid ---------------- */
  window.story({
    id: 'feature-grid', group: G, name: 'FeatureGrid', status: 'new', fill: true, align: 'start', minH: 520,
    tagline: 'A responsive grid of capabilities — each a line icon, a tight title, and a plain-spoken sentence.',
    importLine: "const { FeatureGrid } = F2;",
    keywords: ['features', 'grid', 'benefits', 'marketing'],
    props: [
      { name: 'eyebrow', type: 'string', default: 'How we work', control: 'text', description: 'Section kicker.' },
      { name: 'title', type: 'string', default: 'Engineering, not templates.', control: 'text', description: 'Section heading.' },
      { name: 'features', type: 'Array<{icon,title,body}>', description: 'Feature items (defaults to the F2 methodology).' },
    ],
    render: (v) => <FeatureGrid eyebrow={v.eyebrow} title={v.title} />,
    code: (v) => `<FeatureGrid\n  eyebrow="${v.eyebrow}"\n  title="${v.title}"\n  features={[\n    { icon: 'Microscope', title: 'Scoped to your stack', body: '…' },\n    { icon: 'Boxes', title: 'Production-grade builds', body: '…' },\n  ]}\n/>`,
    a11y: ['Feature icons are decorative; titles + bodies carry meaning.', 'The grid reflows from 3 columns to 1 as width narrows — verify with the viewport switch.'],
  });

  /* ---------------- Pricing ---------------- */
  window.story({
    id: 'pricing', group: G, name: 'Pricing', status: 'new', fill: true, align: 'start', minH: 600,
    tagline: 'Three-tier pricing with a featured plan — amber-edged, "Most picked", and a filled CTA.',
    importLine: "const { Pricing, PricingCard } = F2;",
    keywords: ['pricing', 'plans', 'tiers', 'marketing'],
    props: [
      { name: 'eyebrow', type: 'string', default: 'Pricing', control: 'text', description: 'Section kicker.' },
      { name: 'title', type: 'string', default: 'Scoped up front. No per-seat surprises.', control: 'text', description: 'Section heading.' },
      { name: 'plans', type: 'Array<PricingCardProps>', description: 'Plan definitions; mark one { featured: true }.' },
    ],
    render: (v) => <Pricing eyebrow={v.eyebrow} title={v.title} />,
    code: () => `<Pricing\n  plans={[\n    { name: 'Pilot', price: 'R$ 18k', period: 'one-time', features: [...], cta: 'Book a scope' },\n    { name: 'Studio', price: 'R$ 9.8k', period: '/mo', features: [...], cta: 'Start a project', featured: true },\n    { name: 'Enterprise', price: 'Custom', period: '', features: [...], cta: 'Talk to us' },\n  ]}\n/>`,
    a11y: ['The featured plan is distinguished by an amber border, a badge <em>and</em> a filled button — not color alone.', 'Each plan card ends with one clear CTA.'],
    notes: 'Use <code>PricingCard</code> on its own for a single plan, or <code>Pricing</code> for the full comparison row.',
  });

  /* ---------------- Testimonial ---------------- */
  window.story({
    id: 'testimonial', group: G, name: 'Testimonial', status: 'new', fill: true, align: 'start', minH: 380,
    tagline: 'A single, concrete customer quote — the measurable result, attributed. No vague praise.',
    importLine: "const { Testimonial } = F2;",
    keywords: ['testimonial', 'quote', 'social proof', 'review'],
    props: [
      { name: 'quote', type: 'string', control: 'text', default: 'They cut our invoice processing from 3 days to 20 minutes.', description: 'The quote (kept specific and numeric).' },
      { name: 'name', type: 'string', default: 'Marina Alves', control: 'text', description: 'Author name.' },
      { name: 'role', type: 'string', default: 'Head of Operations', control: 'text', description: 'Author role.' },
      { name: 'company', type: 'string', default: 'Logística Andrade', control: 'text', description: 'Author company.' },
    ],
    render: (v) => <Testimonial quote={v.quote} name={v.name} role={v.role} company={v.company} />,
    code: (v) => `<Testimonial\n  quote="${v.quote}"\n  name="${v.name}"\n  role="${v.role}"\n  company="${v.company}"\n/>`,
    a11y: ['Marked up as <code>&lt;figure&gt;</code> / <code>&lt;blockquote&gt;</code> / <code>&lt;figcaption&gt;</code> for correct quote semantics.'],
  });

  /* ---------------- CTASection ---------------- */
  window.story({
    id: 'cta-section', group: G, name: 'CTASection', status: 'new', fill: true, align: 'start', minH: 360,
    tagline: 'The closing call — an amber-washed panel with a direct, honest invitation and one button.',
    importLine: "const { CTASection } = F2;",
    keywords: ['cta', 'closing', 'conversion', 'marketing'],
    props: [
      { name: 'eyebrow', type: 'string', default: 'Ready when you are', control: 'text', description: 'Kicker.' },
      { name: 'title', type: 'string', default: "Let's find the workflow worth automating.", control: 'text', description: 'Headline.' },
      { name: 'body', type: 'string', description: 'Supporting line.' },
      { name: 'cta', type: 'string', default: 'Start a project', control: 'text', description: 'Button label.' },
    ],
    render: (v) => <CTASection eyebrow={v.eyebrow} title={v.title} cta={v.cta} />,
    code: (v) => `<CTASection\n  eyebrow="${v.eyebrow}"\n  title="${v.title}"\n  cta="${v.cta}"\n/>`,
    a11y: ['The amber wash uses the accent <em>surface</em> token, keeping amber within its ~10% budget while staying AA for the text on top.'],
  });

  /* ---------------- LogoCloud ---------------- */
  window.story({
    id: 'logo-cloud', group: G, name: 'LogoCloud', status: 'new', fill: true, align: 'start', minH: 200,
    tagline: 'A restrained "trusted by" row — wordmarks, not a wall of color.',
    importLine: "const { LogoCloud } = F2;",
    keywords: ['logos', 'trusted by', 'customers', 'social proof'],
    props: [
      { name: 'label', type: 'string', default: 'Trusted by teams that ship', control: 'text', description: 'Mono caption.' },
      { name: 'logos', type: 'string[]', description: 'Company names (swap for real SVG marks in production).' },
    ],
    render: (v) => <LogoCloud label={v.label} />,
    code: (v) => `<LogoCloud\n  label="${v.label}"\n  logos={['Andrade', 'Nuvio', 'Cortex', 'Praxis', 'Lumen']}\n/>`,
    a11y: ['Replace text wordmarks with real logo SVGs that carry <code>alt</code>/<code>aria-label</code> in production.'],
  });

  /* ---------------- FAQ ---------------- */
  window.story({
    id: 'faq', group: G, name: 'FAQ', status: 'new', fill: true, align: 'start', minH: 520,
    tagline: 'Common questions answered plainly, built on the Accordion — first item open by default.',
    importLine: "const { FAQ } = F2;",
    keywords: ['faq', 'questions', 'accordion', 'marketing'],
    props: [
      { name: 'eyebrow', type: 'string', default: 'FAQ', control: 'text', description: 'Kicker.' },
      { name: 'title', type: 'string', default: 'Questions, answered plainly.', control: 'text', description: 'Heading.' },
      { name: 'items', type: 'Array<{title, content}>', description: 'Q&A items.' },
    ],
    render: (v) => <FAQ eyebrow={v.eyebrow} title={v.title} />,
    code: () => `<FAQ items={[\n  { title: 'How is F2 different from a no-code tool?', content: '…' },\n  { title: 'How long does a first automation take?', content: '…' },\n]} />`,
    a11y: ['Reuses the Accordion semantics — each question is a button with <code>aria-expanded</code>.'],
  });

  /* ---------------- Footer ---------------- */
  window.story({
    id: 'footer', group: G, name: 'Footer', status: 'new', fill: true, align: 'start', minH: 360,
    tagline: 'The site footer — brand statement, link columns, copyright and social marks on a sunken surface.',
    importLine: "const { Footer } = F2;",
    keywords: ['footer', 'links', 'sitemap', 'marketing'],
    props: [
      { name: '—', type: '—', description: 'Self-contained; edit the columns inside the component or fork it for your IA.' },
    ],
    render: () => <Footer />,
    code: () => `<Footer />`,
    a11y: ['Rendered as a <code>&lt;footer&gt;</code> landmark; social links carry <code>aria-label</code>s.', 'Link columns are real lists for screen-reader structure.'],
  });
})();