/* Home page — three hero directions (variation 1/2/3) + shared sections. */

const DS_home = window.DawsonsDesignSystem_489d7d;

function HeroBoldBlack({ onNavigate }) {
  const { Button, Badge, Icon } = DS_home;
  return (
    <section className="hero">
      <div className="blueprint"></div>
      <div className="hero-glow"></div>
      <div className="container container-wide" style={{ position: 'relative', paddingBlock: 'clamp(4rem, 8vw, 8rem)' }}>
        <div style={{ maxWidth: 760 }}>
          <span className="eyebrow" style={{ color: 'var(--red-400)', display: 'inline-flex', alignItems: 'center', gap: 9 }}>
            <span style={{ width: 26, height: 2, background: 'var(--brand)' }}></span>
            Domestic · Commercial · Industrial
          </span>
          <h1 className="display-2xl" style={{ color: 'var(--white)', marginTop: 22 }}>
            Design. Build.<br />Test. <span style={{ color: 'var(--red-500)' }}>Maintain.</span>
          </h1>
          <p className="lead" style={{ color: 'var(--steel-300)', marginTop: 22, maxWidth: 560 }}>
            One trusted team for electrical, plumbing, heating and building work across Sheffield, Barnsley and Manchester — qualified, insured and fully accredited.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onNavigate('Contact')}>Get a free quote</Button>
            <Button variant="dark" size="lg" iconLeft="phone" onClick={() => onNavigate('Services')}>Our services</Button>
          </div>
          <div className="trust-strip" style={{ justifyContent: 'flex-start', marginTop: 44, gap: 26 }}>
            {window.SITE.accreditations.map((a) => (
              <span key={a} className="accred" style={{ color: 'var(--steel-400)' }}><Icon name="badge-check" size={17} style={{ color: 'var(--red-500)' }} />{a}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroPhoto({ onNavigate }) {
  const { Button, Badge, Icon } = DS_home;
  return (
    <section className="hero">
      <div className="container container-wide" style={{ position: 'relative' }}>
        <div className="grid-2" style={{ gap: 0, alignItems: 'stretch', minHeight: 540 }}>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBlock: 'clamp(3rem,6vw,6rem)', paddingRight: 'clamp(1rem,4vw,4rem)' }}>
            <Badge tone="brand" solid icon="zap">Multi-trade specialists</Badge>
            <h1 className="display-xl" style={{ color: 'var(--white)', marginTop: 20 }}>
              The trades team your project deserves
            </h1>
            <p className="lead" style={{ color: 'var(--steel-300)', marginTop: 18, maxWidth: 520 }}>
              From a single socket to a full commercial fit-out, we plan, deliver and certify every job in-house — no subcontractor merry-go-round.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onNavigate('Contact')}>Get a free quote</Button>
              <Button variant="dark" size="lg" iconLeft="phone-call" onClick={() => onNavigate('Services')}>Talk to us</Button>
            </div>
          </div>
          <Photo label="On-site: commercial electrical fit-out" icon="zap" style={{ minHeight: 540, borderRadius: 0 }} />
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ onNavigate }) {
  const { Button, Icon, StatTile } = DS_home;
  return (
    <section className="hero" style={{ background: 'var(--color-bg)' }}>
      <div className="grid-2" style={{ gap: 0, alignItems: 'stretch' }}>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(3rem,7vw,7rem) clamp(1.5rem,5vw,5rem)', maxWidth: 680, marginLeft: 'auto' }}>
          <span className="eyebrow"><span style={{ width: 26, height: 2, background: 'var(--brand)', display: 'inline-block', marginRight: 9, verticalAlign: 'middle' }}></span>Established 1999</span>
          <h1 className="display-xl" style={{ color: 'var(--text-primary)', marginTop: 18 }}>
            Trusted trades for homes &amp; businesses
          </h1>
          <p className="lead" style={{ marginTop: 18, maxWidth: 480 }}>
            Electrical, plumbing, heating and building work delivered by one accountable team across South Yorkshire and Greater Manchester.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onNavigate('Contact')}>Get a free quote</Button>
            <Button variant="secondary" size="lg" iconLeft="phone" onClick={() => onNavigate('Services')}>Our services</Button>
          </div>
        </div>
        <div style={{ background: 'var(--color-bg-dark)', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(2.5rem,5vw,5rem)' }}>
          <div className="blueprint"></div>
          <div className="hero-glow" style={{ top: 'auto', bottom: -200, right: -150 }}></div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, maxWidth: 460 }}>
            {window.SITE.stats.map((s) => <StatTile key={s.label} value={s.value} suffix={s.suffix} label={s.label} theme="light" />)}
          </div>
          <div style={{ position: 'relative', marginTop: 40, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            {window.SITE.accreditations.slice(0, 4).map((a) => (
              <span key={a} className="accred" style={{ color: 'var(--steel-400)' }}><Icon name="badge-check" size={16} style={{ color: 'var(--red-500)' }} />{a}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesPreview({ onNavigate }) {
  const { SectionHeading, ServiceCard, Button } = DS_home;
  return (
    <section className="section">
      <div className="container container-wide">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap', marginBottom: 40 }}>
          <SectionHeading eyebrow="What we do" title="One team for every trade"
            intro="No juggling contractors. We handle the whole job — and certify it — under one roof." style={{ maxWidth: 560 }} />
          <Button variant="ghost" iconRight="arrow-right" onClick={() => onNavigate('Services')}>All services</Button>
        </div>
        <div className="grid-3">
          {window.SITE.services.map((s) => (
            <ServiceCard key={s.title} icon={s.icon} title={s.title} cta="Learn more" href="#"
              onClick={(e) => { e.preventDefault(); onNavigate('Services'); }}>{s.blurb}</ServiceCard>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const { SectionHeading, Icon } = DS_home;
  return (
    <section className="section subtle">
      <div className="container container-wide">
        <SectionHeading eyebrow="How it works" title="Straightforward from quote to sign-off" align="center" style={{ marginBottom: 48 }} />
        <div className="grid-4">
          {window.SITE.steps.map((step, i) => (
            <div key={step.title} style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
              <span style={{ position: 'relative', width: 64, height: 64, borderRadius: '50%', background: 'var(--color-surface)', border: '1px solid var(--color-border)', boxShadow: 'var(--shadow-sm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--brand)' }}>
                <Icon name={step.icon} size={26} />
                <span style={{ position: 'absolute', top: -6, right: -6, width: 24, height: 24, borderRadius: '50%', background: 'var(--brand)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</span>
              </span>
              <h3 style={{ fontSize: 'var(--fs-h4)', margin: 0 }}>{step.title}</h3>
              <p style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--text-secondary)', margin: 0, lineHeight: 1.5 }}>{step.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatsBand() {
  const { StatTile } = DS_home;
  return (
    <section className="section dark" style={{ paddingBlock: 'var(--space-9)' }}>
      <div className="container container-wide">
        <div className="grid-4" style={{ gap: 24 }}>
          {window.SITE.stats.map((s) => <StatTile key={s.label} value={s.value} suffix={s.suffix} label={s.label} theme="light" align="center" />)}
        </div>
      </div>
    </section>
  );
}

function Reviews() {
  const { SectionHeading } = DS_home;
  return (
    <section className="section">
      <div className="container container-wide">
        <SectionHeading eyebrow="Reviews" title="Rated by the people we work for" align="center" style={{ marginBottom: 44 }} />
        <div className="grid-3">
          {window.SITE.reviews.map((r) => <ReviewCard key={r.name} review={r} />)}
        </div>
      </div>
    </section>
  );
}

function CTABand({ onNavigate }) {
  const { Button, Icon } = DS_home;
  return (
    <section className="section" style={{ paddingBlock: 'var(--space-9)' }}>
      <div className="container container-wide">
        <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--color-bg-dark)', borderRadius: 'var(--radius-xl)', padding: 'clamp(2.5rem,5vw,4.5rem)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
          <div className="hero-glow" style={{ width: 420, height: 420, top: -160, right: 40 }}></div>
          <div style={{ position: 'relative', maxWidth: 620 }}>
            <h2 className="display-lg" style={{ color: 'var(--white)' }}>Got a job that needs doing properly?</h2>
            <p className="lead" style={{ color: 'var(--steel-300)', marginTop: 14 }}>Tell us what you need — we'll arrange a free, no-obligation survey and a clear fixed quote.</p>
          </div>
          <div style={{ position: 'relative', display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onNavigate('Contact')}>Get a free quote</Button>
            <Button variant="dark" size="lg" iconLeft="phone">{window.SITE.phone}</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ variation = 1, onNavigate }) {
  const Hero = variation === 2 ? HeroPhoto : variation === 3 ? HeroSplit : HeroBoldBlack;
  return (
    <div>
      <Hero onNavigate={onNavigate} />
      <ServicesPreview onNavigate={onNavigate} />
      <Process />
      <StatsBand />
      <Reviews />
      <CTABand onNavigate={onNavigate} />
    </div>
  );
}

Object.assign(window, { Home });