// Sections.jsx — Intro, Services, Styles, Process, Reasons, FAQ
const { useState: useStateS } = React;

function Eyebrow({ children }) {
  return <span className="eyebrow section-eyebrow">{children}</span>;
}

function Intro() {
  return (
    <section className="section section-intro reveal" id="intro">
      <div className="section-inner narrow">
        <Eyebrow>— Studio Note</Eyebrow>
        <h2 className="intro-quote">A finished living room starts with the wall you look at every day.</h2>
        <p className="lead intro-sub">From clean TV feature walls to full fireplace builds with shelves, lighting, and textured finishes — every wall is custom-designed around your room, your TV, and the way you live.</p>
      </div>
    </section>
  );
}

function Services() {
  const items = [
    'Custom TV media walls',
    'Electric fireplace walls',
    'Built-in shelves and mantels',
    'LED accent lighting',
    'Wood slat panels',
    'Smooth drywall & textured finishes',
    'Stone, plaster, and Roman clay walls',
    'TV niches and hidden wiring',
    'Custom layouts for any room',
  ];
  return (
    <section className="section reveal" id="services">
      <div className="section-inner">
        <div className="services-head">
          <Eyebrow>— What We Build</Eyebrow>
          <h2 className="section-h2">What we build,<br/>from frame to finish.</h2>
        </div>
        <div className="services-grid">
          <ul className="services-list">
            {items.map((item, i) => <li key={i} className="services-item">{item}</li>)}
          </ul>
          <div className="services-aside">
            <p className="lead">Each wall is custom-designed around your space, TV size, fireplace preference, style direction, and budget.</p>
            <p className="services-aside-body">No templates — every project starts from your room. We handle structural framing, electrical, finishing, painting, texture, lighting, and final detailing in-house.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Styles() {
  const items = [
    { label: 'Clean Modern', desc: 'Smooth drywall finish, centered TV, electric fireplace, simple mantel, minimal shelves.', img: '../../assets/work-fjord-fluted-niches.jpg' },
    { label: 'Warm Wood', desc: 'Natural wood slats, floating shelves, soft LED lighting, warmer interior feel.', img: '../../assets/work-pool-view.jpeg' },
    { label: 'Stone & Textured', desc: 'Stone-look panels, plaster texture, Roman clay style, stronger feature-wall presence.', img: '../../assets/work-mont-saint-michel.jpg' },
    { label: 'Built-in Storage', desc: 'Shelving, cabinets, display areas, practical storage, symmetrical layout.', img: '../../assets/work-peacock-credenza.jpg' },
    { label: 'Floating Minimal', desc: 'Simple wall volume, hidden wires, clean alignment, no unnecessary details.', img: '../../assets/work-fjord-fluted-niches.jpg' },
  ];
  return (
    <section className="section section-alt reveal" id="styles">
      <div className="section-inner">
        <div className="services-head">
          <Eyebrow>— Design Directions</Eyebrow>
          <h2 className="section-h2">Five starting points<br/>to imagine your wall.</h2>
        </div>
        <div className="styles-grid">
          {items.map((s, i) => (
            <article key={i} className="style-card" style={{ '--n': i + 1 }}>
              <div className="style-card-img" style={{ backgroundImage: `url(${s.img})` }} />
              <div className="style-card-meta">
                <span className="style-card-num">{String(i+1).padStart(2,'0')}</span>
                <span className="style-card-label">{s.label}</span>
              </div>
              <p className="style-card-desc">{s.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', title: 'Share Your Space', body: 'Send a photo of your wall, approximate dimensions, TV size, and any inspiration images.' },
    { n: '02', title: 'Design & Estimate', body: 'We propose the best layout, materials, fireplace and shelf options, with a clear written estimate.' },
    { n: '03', title: 'Build & Install', body: 'We frame, wire, finish, paint or texture, and detail the wall on site — clean and on schedule.' },
    { n: '04', title: 'Final Walk-Through', body: 'The wall is cleaned, reviewed together, photographed, and ready to use the same day.' },
  ];
  return (
    <section className="section reveal" id="process">
      <div className="section-inner">
        <div className="services-head">
          <Eyebrow>— How It Works</Eyebrow>
          <h2 className="section-h2">A clear path<br/>from first photo<br/>to finished wall.</h2>
        </div>
        <div className="process-grid">
          {steps.map((s, i) => (
            <div key={i} className="process-step">
              <div className="process-num">{s.n}</div>
              <div className="process-rule" />
              <div className="process-title">{s.title}</div>
              <p className="process-body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Reasons() {
  const items = [
    { title: 'Specialized', body: 'We only build media walls. It\u2019s all we do, and we do it well.' },
    { title: 'Design-led', body: 'Layout, proportions, and materials are decided before the first cut.' },
    { title: 'Clear scope', body: 'Honest estimates, defined timelines, and a one-year workmanship warranty — no surprises.' },
    { title: 'Built for real homes', body: 'Designed around how you actually live, not just how it photographs.' },
  ];
  return (
    <section className="section section-alt reveal" id="why">
      <div className="section-inner">
        <div className="services-head">
          <Eyebrow>— Why LA Media Wall</Eyebrow>
          <h2 className="section-h2">A specialist studio,<br/>not a contractor.</h2>
        </div>
        <div className="reasons-grid">
          {items.map((it, i) => (
            <div key={i} className="reason">
              <div className="reason-rule" />
              <h4 className="reason-title">{it.title}</h4>
              <p className="reason-body">{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useStateS(0);
  const items = [
    { q: 'How much does a custom media wall cost?', a: 'Custom media walls start at $2,000. Final pricing depends on size, fireplace, shelves, lighting, materials, and finish. The fastest way to get an estimate is to send a photo of your wall, approximate measurements, and a few inspiration images.' },
    { q: 'Do you help with design?', a: 'Yes. We help with layout, proportions, materials, fireplace and TV placement, shelves, lighting, and overall direction.' },
    { q: 'Can you hide wires and prepare the wall for TV mounting?', a: 'Yes — wire management and TV-ready layouts are included on most projects.' },
    { q: 'Do you offer a warranty?', a: 'Yes — every install is backed by a one-year workmanship warranty.' },
    { q: 'Do you work outside Los Angeles?', a: 'We serve Los Angeles and surrounding Southern California areas. Reach out with your location and we\u2019ll confirm availability.' },
  ];
  return (
    <section className="section reveal" id="faq">
      <div className="section-inner">
        <div className="services-head">
          <Eyebrow>— Frequently Asked</Eyebrow>
          <h2 className="section-h2">Common questions,<br/>plainly answered.</h2>
        </div>
        <div className="faq-list">
          {items.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? 'is-open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="faq-toggle">{open === i ? '−' : '+'}</span>
              </button>
              <div className="faq-a"><p>{item.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Intro = Intro;
window.Services = Services;
window.Styles = Styles;
window.Process = Process;
window.Reasons = Reasons;
window.FAQ = FAQ;