const { SectionHeader, ServiceCard, FeatureCard, StatsCounter, Timeline } = window.HisabCheckAccountancyDesignSystem_95b7f0;
const { PageShell, CardLink, BrandCTABanner, useTweaks, TweaksPanel, TweakSection, TweakRadio, FeatureImage, fadeInDecoded, fadeInRef } = window;
const SD = window.SiteData;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "look": "rounded",
  "pace": "comfortable",
  "heroEnergy": "floating"
}/*EDITMODE-END*/;

const LOOK_PRESETS = {
  crisp: { '--radius-card': '8px', '--radius-button': '6px', '--radius-input': '6px', '--radius-section': '16px', '--shadow-card': '0 1px 2px rgba(15,23,42,0.08)', '--shadow-card-hover': '0 3px 10px rgba(15,23,42,0.10)', '--shadow-float': '0 6px 16px rgba(15,23,42,0.12)' },
  rounded: null,
  soft: { '--radius-card': '28px', '--radius-button': '20px', '--radius-input': '18px', '--radius-section': '40px', '--shadow-card': '0 10px 26px rgba(30,64,175,0.10)', '--shadow-card-hover': '0 16px 34px rgba(30,64,175,0.14)', '--shadow-float': '0 22px 52px rgba(30,64,175,0.16)' },
};
const PACE_PRESETS = {
  compact: { '--home-gap': '56px', '--home-hero-pad-t': '48px', '--home-hero-pad-b': '40px' },
  comfortable: null,
  airy: { '--home-gap': '136px', '--home-hero-pad-t': '104px', '--home-hero-pad-b': '96px' },
};
const ALL_VARS = ['--radius-card', '--radius-button', '--radius-input', '--radius-section', '--shadow-card', '--shadow-card-hover', '--shadow-float', '--home-gap', '--home-hero-pad-t', '--home-hero-pad-b'];

function applyTweaks(t) {
  const root = document.documentElement.style;
  ALL_VARS.forEach(v => root.removeProperty(v));
  const applyPreset = preset => { if (preset) Object.entries(preset).forEach(([k, v]) => root.setProperty(k, v)); };
  applyPreset(LOOK_PRESETS[t.look]);
  applyPreset(PACE_PRESETS[t.pace]);
}

function BrandHero({ heroEnergy }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: 'var(--home-hero-pad-t, 72px) 24px var(--home-hero-pad-b, 64px)', background: 'linear-gradient(180deg, var(--blue-50) 0%, var(--color-bg-page) 60%)' }}>
      <div className="hero-blur" style={{ position: 'absolute', top: -120, right: -160, width: heroEnergy === 'minimal' ? 320 : heroEnergy === 'dynamic' ? 560 : 480, height: heroEnergy === 'minimal' ? 320 : heroEnergy === 'dynamic' ? 560 : 480, borderRadius: '50%', background: 'radial-gradient(circle, var(--blue-100) 0%, transparent 70%)', opacity: heroEnergy === 'minimal' ? 0.6 : 1 }} />
      <div className="hero-grid" data-energy={heroEnergy} style={{ maxWidth: 'var(--max-width)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center', position: 'relative' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <span style={{ display: 'inline-flex', width: 'fit-content', whiteSpace: 'nowrap', padding: '6px 14px', borderRadius: 'var(--radius-pill)', background: '#fff', border: '1px solid var(--color-border)', color: 'var(--color-accent-primary)', fontSize: 'var(--fs-small)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-body)' }}>UK-wide online accounting</span>
          <h1 style={{ fontSize: 'var(--fs-display-lg)', color: 'var(--color-text-primary)' }}>UK accounting &amp; tax services made simple</h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body-lg)', color: 'var(--color-text-secondary)', lineHeight: 'var(--lh-body)', margin: 0, maxWidth: 480 }}>Helping individuals, self-employed professionals, landlords and limited companies manage their UK accounting and tax responsibilities with confidence — entirely online.</p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="contact.html" style={{ background: 'var(--color-accent-primary)', color: '#fff', border: 'none', padding: '15px 28px', borderRadius: 'var(--radius-button)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-body)' }}>Book free consultation</a>
            <a href={SD.brand.whatsappCtaLink} rel="noopener noreferrer" style={{ background: 'var(--color-accent-green)', color: '#fff', border: '1.5px solid var(--color-accent-green)', padding: '15px 28px', borderRadius: 'var(--radius-button)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-body)' }}>Chat on WhatsApp</a>
          </div>
          <div style={{ display: 'flex', gap: 32, marginTop: 12, flexWrap: 'wrap' }}>
            <div><div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-bold)', color: 'var(--color-text-primary)' }}>24h</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-tiny)', color: 'var(--color-text-secondary)' }}>Average response time</div></div>
            <div><div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-bold)', color: 'var(--color-text-primary)' }}>UK-wide</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-tiny)', color: 'var(--color-text-secondary)' }}>Remote service</div></div>
            <div><div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-bold)', color: 'var(--color-text-primary)' }}>100%</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-tiny)', color: 'var(--color-text-secondary)' }}>Digital document handling</div></div>
          </div>
        </div>
        <div style={{ position: 'relative', height: 380 }}>
          <div style={{ position: 'absolute', inset: 20, borderRadius: 'var(--radius-card)', boxShadow: 'var(--shadow-float)', border: '1px solid var(--color-border)', overflow: 'hidden' }}>
            <img src="assets/photos/hero-photo.webp" alt="Accountant reviewing financial reports" loading="eager" fetchpriority="high" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', opacity: 0, transition: 'opacity .25s ease' }} onLoad={fadeInDecoded} ref={fadeInRef} />
          </div>
          <div className="float-card" style={{ position: 'absolute', top: 0, left: 0, width: 210, background: '#fff', borderRadius: 'var(--radius-card)', boxShadow: 'var(--shadow-card)', border: '1px solid var(--color-border)', padding: 18, animationDelay: '0s' }}>
            <div style={{ fontSize: 'var(--fs-tiny)', color: 'var(--color-text-secondary)' }}>Self assessment status</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-bold)', color: 'var(--color-success)' }}>Filed on time</div>
          </div>
          <div className="float-card" style={{ position: 'absolute', bottom: 20, right: 0, width: 220, background: '#fff', borderRadius: 'var(--radius-card)', boxShadow: 'var(--shadow-card)', border: '1px solid var(--color-border)', padding: 18, animationDelay: '0.6s' }}>
            <div style={{ fontSize: 'var(--fs-tiny)', color: 'var(--color-text-secondary)' }}>Documents shared securely</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-bold)', color: 'var(--color-accent-primary)' }}>Encrypted upload</div>
          </div>
          <div className="float-card" style={{ position: 'absolute', top: 130, right: 30, width: 170, background: '#fff', borderRadius: 'var(--radius-card)', boxShadow: 'var(--shadow-card)', border: '1px solid var(--color-border)', padding: 16, animationDelay: '1.2s' }}>
            <div style={{ fontSize: 'var(--fs-tiny)', color: 'var(--color-text-secondary)' }}>VAT return</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-body-lg)', fontWeight: 'var(--fw-bold)', color: 'var(--color-text-primary)' }}>Q3 submitted</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home() {
  const whyItems = [
    { icon: '⚡', title: 'Fast turnaround', description: 'Most requests answered within one business day.' },
    { icon: '💷', title: 'Transparent pricing', description: 'Clear, upfront fees — no surprise invoices.' },
    { icon: '🤝', title: 'Personal service', description: 'A named accountant you can speak to directly.' },
    { icon: '💻', title: 'Technology-driven', description: 'Cloud tools and secure portals, not paper trays.' },
    { icon: '🔒', title: 'Secure document handling', description: 'Encrypted, secure sharing for every document you send.' },
    { icon: '💬', title: 'WhatsApp & email support', description: 'Reach us the way that suits you, whenever you need to.' },
  ];
  return (
    <PageShell active="Home">
      <BrandHero heroEnergy="floating" />
      <section style={{ maxWidth: 'var(--max-width)', margin: '0 auto', padding: 'var(--home-gap, 96px) 24px 0' }}>
        <SectionHeader badge="Our services" title="Accounting support built for modern business" description="From day-to-day bookkeeping to year-end filing, every service is handled by a dedicated accountant." />
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 48 }}>
          {SD.services.slice(0, 6).map(s => <CardLink key={s.title} href={s.href}><ServiceCard icon={s.icon} title={s.title} description={s.description} benefits={s.benefits} /></CardLink>)}
        </div>
        <div style={{ textAlign: 'center', marginTop: 40 }}><a href="services.html" style={{ fontFamily: 'var(--font-body)', fontWeight: 'var(--fw-semibold)', color: 'var(--color-accent-primary)' }}>View all services &rarr;</a></div>
      </section>
      <section style={{ maxWidth: 'var(--max-width)', margin: '0 auto', padding: 'var(--home-gap, 96px) 24px 0' }}>
        <div className="stats-wrap" style={{ background: '#fff', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-section)', padding: 56 }}>
          <StatsCounter stats={[{ value: 24, suffix: 'h', label: 'Average response time' }, { value: 100, suffix: '%', label: 'Digital document handling' }, { value: 8, suffix: '+', label: 'Core services offered' }, { value: 2, suffix: '', label: 'Countries — UK & India' }]} />
        </div>
      </section>
      <section style={{ maxWidth: 'var(--max-width)', margin: '0 auto', padding: 'var(--home-gap, 96px) 24px 0' }}>
        <SectionHeader badge="Why choose HisabCheck" title="A modern, digital-first accounting practice" description="No branch network to visit — just responsive, technology-driven support wherever you are in the UK." />
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 48, marginTop: 48, alignItems: 'center' }}>
          <FeatureImage id="home-why-us" placeholder="Drop a photo of a modern remote office setup" height={340} />
          <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
            {whyItems.map(f => <FeatureCard key={f.title} {...f} />)}
          </div>
        </div>
      </section>
      <section style={{ maxWidth: 'var(--max-width)', margin: '0 auto', padding: 'var(--home-gap, 96px) 24px 0' }}>
        <SectionHeader badge="How it works" title="Onboarding in six simple steps" />
        <div style={{ maxWidth: 600, margin: '48px auto 0' }}><Timeline steps={SD.process} /></div>
      </section>
      <section style={{ maxWidth: 'var(--max-width)', margin: '0 auto', padding: 'var(--home-gap, 96px) 24px 0' }}>
        <SectionHeader badge="Client stories" title="Trusted by individuals and businesses across the UK" />
        <div style={{ marginTop: 48 }}><TestimonialSlider reviews={SD.testimonials} /></div>
      </section>
      <div style={{ padding: 'var(--home-gap, 96px) 24px var(--home-gap, 96px)' }}><BrandCTABanner title="Ready to simplify your accounting?" description="Book a free consultation and see how HisabCheck can help." ctaLabel="Book free consultation" href="contact.html" /></div>
    </PageShell>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Home />);