/* Goodman Decorators — Homepage */
const { Button, Icon, ServiceCard, ProjectCard, PricingCard, TestimonialCard, Tag,
        BeforeAfterSlider, Accordion, MediaPlaceholder } = GDL;

const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTheme": "dark",
  "showPricing": true
}/*EDITMODE-END*/;

function HomeHero({ onEstimate, theme }) {
  const dark = theme === 'dark';
  return (
    <section style={{ position: 'relative', background: dark ? 'var(--stone-900)' : 'var(--surface-sunken)', color: dark ? 'var(--stone-50)' : 'var(--text-strong)', overflow: 'hidden' }}>
      {dark && <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 80% 0%, rgba(166,124,79,0.28), transparent 60%)' }}></div>}
      <div style={{ position: 'relative', maxWidth: 'var(--container-xl)', margin: '0 auto', padding: 'var(--space-11) var(--gutter)', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-9)', alignItems: 'center' }}>
        <div>
          <Eyebrow style={{ color: dark ? 'var(--bronze-300)' : 'var(--accent-hover)' }}>Chicago &amp; the North/Northwest suburbs</Eyebrow>
          <h1 style={{ font: 'var(--fw-extrabold) var(--fs-hero)/1.05 var(--font-display)', letterSpacing: 'var(--ls-tight)', margin: '16px 0 20px', textWrap: 'balance' }}>
            Homes worth coming back to.
          </h1>
          <p style={{ font: 'var(--fw-regular) var(--fs-body-lg)/1.6 var(--font-body)', color: dark ? 'var(--stone-300)' : 'var(--text-muted)', maxWidth: '46ch', margin: '0 0 32px' }}>
            Painting, remodeling and repair for discerning homeowners and commercial spaces — done with craft, care, and clean job sites.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button variant="accent" size="lg" onClick={onEstimate}>Get a free estimate</Button>
            <Button variant="outline" size="lg" onClick={() => window.location.href = 'Portfolio.html'}
              style={dark ? { color: '#fff', borderColor: 'rgba(255,255,255,0.28)' } : undefined}
              iconLeft={<Icon name="image" size={18} color={dark ? '#fff' : 'currentColor'} />}>View our work</Button>
          </div>
          <div style={{ display: 'flex', gap: 28, marginTop: 40 }}>
            {[[BIZ.rating, 'Across ' + BIZ.reviews], ['15+ yrs', 'Serving Chicagoland'], ['Licensed', '& fully insured']].map(([n, l]) => (
              <div key={l}>
                <div style={{ font: 'var(--fw-extrabold) var(--fs-h2)/1 var(--font-display)', color: dark ? '#fff' : 'var(--text-strong)' }}>{n}</div>
                <div style={{ font: 'var(--fw-regular) var(--fs-caption)/1.3 var(--font-body)', color: dark ? 'var(--stone-400)' : 'var(--text-subtle)', marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ borderRadius: 'var(--radius-2xl)', overflow: 'hidden', boxShadow: 'var(--elevation-5)' }}>
          <img src="assets/kitchen-remodel-hero.webp" alt="Luxury kitchen remodel by Goodman Painters & Decorators" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', display: 'block' }} />
        </div>
      </div>
    </section>
  );
}

function TrustBar() {
  const items = [['shield', 'Licensed & insured'], ['award', '2-year workmanship warranty'], ['users', 'Owner on every project'], ['sparkles', 'Spotless job sites']];
  return (
    <div style={{ borderBottom: '1px solid var(--border-subtle)', background: 'var(--surface)' }}>
      <div style={{ maxWidth: 'var(--container-xl)', margin: '0 auto', padding: '20px var(--gutter)', display: 'flex', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
        {items.map(([ic, l]) => (
          <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, font: 'var(--fw-medium) var(--fs-body-sm)/1 var(--font-body)', color: 'var(--text-muted)' }}>
            <Icon name={ic} size={18} color="var(--accent)" /> {l}
          </div>
        ))}
      </div>
    </div>
  );
}

function HomeServices() {
  const svc = [
    ['brush', 'Interior painting', 'Premium finishes, meticulous prep, crisp lines on walls, trim and ceilings.', 'Interior Painting.html'],
    ['paint-roller', 'Exterior painting', 'Weather-ready coatings that protect and elevate your home’s facade.', 'Services.html'],
    ['home', 'Kitchen remodeling', 'Custom cabinetry, stone counters, and lighting designed around how you live.', 'Services.html'],
    ['ruler', 'Bathroom remodeling', 'Spa-grade materials and tilework with a designer’s eye for detail.', 'Services.html'],
    ['hammer', 'Drywall & plaster', 'Seamless installation and repair — the flat, quiet walls good paint needs.', 'Services.html'],
    ['sparkles', 'Handyman & repairs', 'Skilled hands for the punch list — from door hardware to trim to tile.', 'Services.html'],
  ];
  return (
    <Section>
      <SectionHeading eyebrow="What we do" title="A single trusted team for every room" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--grid-gap)' }}>
        {svc.map(([ic, t, d, href]) => <ServiceCard key={t} icon={ic} title={t} description={d} linkLabel="Explore" href={href} />)}
      </div>
    </Section>
  );
}

function HomeReveal() {
  return (
    <Section bg="var(--surface-sunken)">
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-9)', alignItems: 'center' }}>
        <div>
          <Eyebrow>Before &amp; after</Eyebrow>
          <h2 style={{ font: 'var(--fw-bold) var(--fs-h1)/1.15 var(--font-display)', color: 'var(--text-strong)', margin: '14px 0 16px', letterSpacing: 'var(--ls-tight)' }}>
            See the difference craft makes
          </h2>
          <p style={{ font: 'var(--fw-regular) var(--fs-body-lg)/1.6 var(--font-body)', color: 'var(--text-muted)', maxWidth: '42ch', margin: '0 0 28px' }}>
            Drag the handle to reveal how thoughtful design and honest workmanship transform a space.
          </p>
          <Button variant="primary" onClick={() => window.location.href = 'Portfolio.html'}>Browse the full portfolio</Button>
        </div>
        <BeforeAfterSlider ratio="16/10" before="assets/bath-before.webp" after="assets/bath-after.webp" beforeLabel="Before" afterLabel="After" />
      </div>
    </Section>
  );
}

function HomeTestimonials() {
  const t = [
    [5, 'It was nice to work with one company that could handle the entire job, from design down to the smallest details. We love our new kitchen.', 'Homeowner', 'Kitchen remodel · Chicago'],
    [5, 'Professional, reliable, trustworthy and courteous from beginning to end. We’ve used Goodman for years and recommend them without hesitation.', 'Repeat client', 'Whole-home work · North Side'],
    [5, 'The owner arrived the same day, the proposal was within budget, and the crew did an outstanding job. They did not disappoint.', 'Christ Temple Church', 'Commercial painting · Chicago'],
  ];
  return (
    <Section>
      <SectionHeading center eyebrow="Client reviews" title="Trusted by Chicagoland homeowners"
        lede={BIZ.rating + ' across ' + BIZ.reviews + ' — and counting.'} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--grid-gap)' }}>
        {t.map((x) => <TestimonialCard key={x[2]} rating={x[0]} quote={x[1]} name={x[2]} meta={x[3]} />)}
      </div>
    </Section>
  );
}

function HomePricing({ onEstimate, onBookCall }) {
  return (
    <Section bg="var(--surface-sunken)">
      <SectionHeading center eyebrow="How we work" title="Right-sized for your project"
        lede="Every engagement begins with a free, detailed estimate." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--grid-gap)', alignItems: 'start' }}>
        <PricingCard name="Refresh" price="$" unit="paint & finishes" description="A fresh, flawless coat for one or many rooms." features={['Color consultation', 'Premium low-VOC paint', 'Full prep & protection', '1-year warranty']} cta="Get estimate" onCta={onEstimate} />
        <PricingCard name="Renovate" price="$$" unit="kitchens & baths" description="Design-led remodels of the rooms you use most." features={['On-site design consult', 'Licensed & insured crew', 'Material sourcing', 'Owner-managed project', '2-year workmanship warranty']} featured cta="Request estimate" onCta={onEstimate} />
        <PricingCard name="Full remodel" price="$$$" unit="whole-home" description="Comprehensive transformations, managed end to end." features={['Scope & drawings', 'Permit management', 'Material selections', '2-year warranty']} cta="Book a call" onCta={onBookCall} />
      </div>
    </Section>
  );
}

function HomeFAQ() {
  return (
    <Section>
      <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 'var(--space-9)' }}>
        <div>
          <Eyebrow>Good to know</Eyebrow>
          <h2 style={{ font: 'var(--fw-bold) var(--fs-h1)/1.15 var(--font-display)', color: 'var(--text-strong)', margin: '14px 0 16px', letterSpacing: 'var(--ls-tight)' }}>
            Questions, answered
          </h2>
          <p style={{ font: 'var(--fw-regular) var(--fs-body-sm)/1.6 var(--font-body)', color: 'var(--text-muted)', maxWidth: '34ch' }}>
            Still curious? Call us at <a href={BIZ.phoneHref}>{BIZ.phone}</a> — a real person picks up.
          </p>
        </div>
        <Accordion defaultOpen={[0]} items={[
          { q: 'Are you licensed and insured?', a: 'Yes. We carry full liability and workers’ comp coverage and are licensed in Illinois. We’ll share certificates before any work begins.' },
          { q: 'How does the estimate process work?', a: 'We visit your property, discuss your goals, and send a clear, itemized estimate — usually within two business days, at no cost.' },
          { q: 'What areas do you serve?', a: BIZ.areas + '.' },
          { q: 'Do you offer a warranty?', a: 'Every project includes a workmanship warranty — one to two years depending on scope — on top of manufacturer material warranties.' },
          { q: 'How do you keep the job site clean?', a: 'Daily cleanup is standard. We protect floors and furnishings, contain dust, and leave your home tidy every evening.' },
        ]} />
      </div>
    </Section>
  );
}

function HomePage() {
  const [t, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);
  const [estimateModal, openEstimate] = useEstimateModal();
  return (
    <div style={{ background: 'var(--canvas)' }} data-screen-label="Home">
      <SiteHeader onCta={openEstimate} />
      <HomeHero onEstimate={openEstimate} theme={t.heroTheme} />
      <TrustBar />
      <HomeServices />
      <HomeReveal />
      <HomeTestimonials />
      {t.showPricing && <HomePricing onEstimate={openEstimate} onBookCall={() => window.location.href = 'Estimate.html#book'} />}
      <HomeFAQ />
      <CTABand onEstimate={openEstimate} />
      <SiteFooter />
      {estimateModal}
      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Hero theme" value={t.heroTheme} options={['dark', 'light']} onChange={(v) => setTweak('heroTheme', v)} />
        <TweakSection label="Sections" />
        <TweakToggle label="Show pricing tiers" value={t.showPricing} onChange={(v) => setTweak('showPricing', v)} />
      </TweaksPanel>
    </div>
  );
}

window.HomePage = HomePage;