import React, { useState } from 'react';
import { Header } from '../../../components/Header';
import { Footer } from '../../../components/Footer';
import { BottomCta } from '../../../components/BottomCta';

const BKHero = () => (
  <section className="bk-hero">
    <div className="bk-hero-container">
      <h1 className="bk-hero-title">Build Your Kitchen</h1>
      <p className="bk-hero-subtitle">If you can't buy it for your specific kitchen, you build it for your specific kitchen.</p>
      <p className="bk-hero-hook">Handcrafted guides for custom cabinetry, islands, shelving, and storage solutions.</p>
    </div>
  </section>
);

const TOP5 = [
  { rank: 1, query: 'custom kitchen island', guides: 'Kitchen Island, Breakfast Bar' },
  { rank: 2, query: 'open shelving systems', guides: 'Open Shelves, Pot Rack' },
  { rank: 3, query: 'kitchen storage solutions', guides: 'Pantry Cabinet, Drawer Dividers, Spice Drawer' },
  { rank: 4, query: 'built-in seating', guides: 'Banquette Seating, Breakfast Bar' },
  { rank: 5, query: 'cabinet customization', guides: 'Under-Sink Cabinet, Corner Cabinet Inserts' }
];

const BKTop5 = () => (
  <section className="bk-top5">
    <div className="bk-container">
      <h2 className="bk-section-title">Top Kitchen Build Queries</h2>
      <div className="bk-top5-grid">
        {TOP5.map(item => (
          <div key={item.rank} className="bk-top5-card">
            <span className="bk-rank">{item.rank}</span>
            <h3 className="bk-query">{item.query}</h3>
            <p className="bk-guides-list">{item.guides}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const BKEssay = () => (
  <section className="bk-essay">
    <div className="bk-container">
      <h2 className="bk-section-title">Why Build Instead of Buy</h2>
      <div className="bk-essay-text">
        <p>Kitchen cabinets and built-ins are expensive. A single island can cost $2,000–$5,000 retail. A full pantry cabinet system can top $3,000. But your kitchen is unique. Its dimensions, light, layout, and workflow are singular.</p>
        <p>When you buy stock, you're buying compromises: slightly-too-shallow shelves, awkward corner spaces, finishes that don't match your walls. When you build, you solve for your kitchen. You choose materials, dimensions, and finishes. You place storage exactly where you reach. You design for how your family cooks, not how a catalog thinks families cook.</p>
        <p>This collection teaches the fundamentals: how to measure, cut, assemble, finish, and install. We include tool lists, material budgets, timeline expectations, and the most common mistakes so you don't repeat them.</p>
        <p>Start with one project—a shelf, a drawer organizer, a breakfast bar. Build confidence. Then tackle the bigger vision.</p>
      </div>
    </div>
  </section>
);

const CONTRIBUTORS = [
  { name: 'Marcus Webb', role: 'Trade Lead', bio: 'Carpenter & cabinetmaker with 18 years in residential kitchens.' },
  { name: 'Dana Cole', role: 'Design Consultant', bio: 'Kitchen designer specializing in custom builds and space optimization.' },
  { name: 'Ray Torres', role: 'Safety Specialist', bio: 'Construction safety professional, ensures builds are sound and code-compliant.' },
  { name: 'Iris', role: 'AI Editor', bio: 'Synthesizes multi-source guidance into coherent step-by-step narratives.' }
];

const BKContributors = () => (
  <section className="bk-contributors">
    <div className="bk-container">
      <h2 className="bk-section-title">Who Made This</h2>
      <div className="bk-contributors-grid">
        {CONTRIBUTORS.map(c => (
          <div key={c.name} className="bk-contributor-card">
            <h3 className="bk-contributor-name">{c.name}</h3>
            <p className="bk-contributor-role">{c.role}</p>
            <p className="bk-contributor-bio">{c.bio}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const TOOLS = [
  'Circular Saw', 'Miter Saw', 'Orbital Sander', 'Power Drill', 'Pocket Hole Jig', 'Brad Nailer',
  'Stud Finder', 'Level', 'Clamps (Set of 4+)', 'Chisels (¼", ½", ¾", 1")', 'Tape Measure', 'Square'
];

const BKToolkit = () => (
  <section className="bk-toolkit">
    <div className="bk-container">
      <h2 className="bk-section-title">Kitchen Build Toolkit</h2>
      <p className="bk-toolkit-intro">Essential tools for every project in this collection.</p>
      <div className="bk-tools-grid">
        {TOOLS.map(tool => (
          <div key={tool} className="bk-tool-item">
            <span className="bk-tool-name">{tool}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const MISTAKES = [
  'Failing to account for wall irregularities and out-of-plumb conditions',
  'Underestimating material waste when ordering lumber',
  'Not using shims to level cabinets before securing',
  'Ignoring load capacity for floating shelves',
  'Poor ventilation planning for cooking zones',
  'Gaps between custom builds and existing appliances',
  'Rushing finish work and leaving rough edges',
  'Not securing heavy installations to studs'
];

const BKMistakes = () => (
  <section className="bk-mistakes">
    <div className="bk-container">
      <h2 className="bk-section-title">Common Mistakes to Avoid</h2>
      <ul className="bk-mistakes-list">
        {MISTAKES.map((m, i) => (
          <li key={i} className="bk-mistake-item">{m}</li>
        ))}
      </ul>
    </div>
  </section>
);

const BKRelated = () => (
  <section className="bk-related">
    <div className="bk-container">
      <h2 className="bk-section-title">Related Guides</h2>
      <div className="bk-related-grid">
        <a href="/en/kitchen/organize/" className="bk-related-card">
          <h3>Organize Your Kitchen</h3>
          <p>Drawer systems, spice storage, pantry organization.</p>
        </a>
        <a href="/en/kitchen/install/" className="bk-related-card">
          <h3>Install Kitchen Fixtures</h3>
          <p>Sink, faucet, dishwasher, and appliance installation.</p>
        </a>
        <a href="/en/build/kitchen/" className="bk-related-card">
          <h3>Build Kitchen (Lane View)</h3>
          <p>Same guides, organized from the Build task perspective.</p>
        </a>
      </div>
    </div>
  </section>
);

const BKColophon = () => (
  <section className="bk-colophon">
    <div className="bk-container">
      <h2 className="bk-section-title">About This Edition</h2>
      <p>Build × Kitchen is a handcrafted intersection of two lanes in HowTo: Home Edition. It brings together guides from the Build task lane with solutions specific to kitchen spaces. Palette: forest (#5C7A3E) paired with kitchen terracotta (#C97C5C) and oak neutrals.</p>
      <p>All guides are written by named contributors and synthesized by Iris, our AI editor. No generic templates. Every word is tested for clarity and coherence.</p>
    </div>
  </section>
);

export default function BuildKitchenPage() {
  return (
    <>
      <Header />
      <main className="bk-main">
        <BKHero />
        <BKTop5 />
        <BKEssay />
        <BKContributors />
        <BKToolkit />
        <BKMistakes />
        <BKRelated />
        <BKColophon />
      </main>
      <BottomCta />
      <Footer />
    </>
  );
}

if (typeof window !== 'undefined') {
  window.BKHero = BKHero;
  window.BKTop5 = BKTop5;
  window.BKEssay = BKEssay;
  window.BKContributors = BKContributors;
  window.BKToolkit = BKToolkit;
  window.BKMistakes = BKMistakes;
  window.BKRelated = BKRelated;
  window.BKColophon = BKColophon;
  window.BuildKitchenPage = BuildKitchenPage;
}