/* global React, ReactDOM, TopBar, HeroStage, CredentialRail, Telemetry, ServiceTiles,
           SolarPanelSection, EnergyFlow, CaseStudies, CrewStrip, FinancePanel, FAQ, Footer,
           StickyTab, Icon, TweaksPanel, useTweaks, TweakSection, TweakSlider, TweakSelect, TweakRadio */

const { useEffect } = React;

/* Tweakable defaults */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "ctaCopy": "twin",
  "typePair": "space-jbmono"
}/*EDITMODE-END*/;

const CTA_COPY = {
  twin:     { primary: "See Your Home's Energy Twin", secondary: "Explore the Tech" },
  forecast: { primary: "Get My Energy Forecast (2 mins)", secondary: "Run My Numbers" },
  survey:   { primary: "Book My Site Survey — Free", secondary: "How it works" },
};

const TELEM = [
  { label: "Homes connected", value: "200<span class='unit'>+</span>" },
  { label: "Rated",           value: "4.9<span class='star'> ★</span><span class='unit'>/5</span>" },
  { label: "Lifetime saved",  value: "£3.2<span class='unit'>M</span>" },
  { label: "Energy delivered",value: "18<span class='unit'>GWh</span>" },
];

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.setAttribute("data-type-pair", tweaks.typePair);
  }, [tweaks.typePair]);

  const cta = CTA_COPY[tweaks.ctaCopy] || CTA_COPY.twin;

  return (
    <>
      <TopBar />

      <section className={`hero layout-${tweaks.heroLayout}`}>
        <div className="container">
          <div className="hero-grid">
            <div className="hero-copy">
              <span className="eyebrow">Manchester · Since 2011</span>
              <h1>
                Manchester's <em>home-of-the-future</em> installers.<br />
                Solar, heat pumps, batteries — <span className="amber">one team</span>.
              </h1>
              <p className="hero-sub">
                We design, install and monitor complete home-energy systems. MCS certified.
                BUS grant applied on your behalf. Live dashboard on day one.
              </p>
              <div className="cta-row">
                <a href="#callback" className="btn btn-primary">{cta.primary} <Icon.Arrow className="arrow" /></a>
                <a href="#services" className="btn btn-ghost">{cta.secondary}</a>
              </div>
              <CredentialRail />
            </div>

            <HeroStage />
          </div>
        </div>
      </section>

      <Telemetry metrics={TELEM} />

      <div className="cobrand container">
        <img src="/demo/modern/assets/logo-mitsubishi.png" alt="Mitsubishi Ecodan" style={{height: '32px'}} /><span className="dot"></span>
        <img src="/demo/modern/assets/logo-tesla.png" alt="Tesla Powerwall" style={{height: '32px'}} /><span className="dot"></span>
        <span>Vaillant</span><span className="dot"></span>
        <span>Samsung</span><span className="dot"></span>
        <img src="/demo/modern/assets/logo-givenergy.png" alt="GivEnergy" style={{height: '32px'}} /><span className="dot"></span>
        <span>Ohme</span>
      </div>

      <ServiceTiles />
      <SolarPanelSection />
      <EnergyFlow />
      <CaseStudies />
      <CrewStrip />
      <FinancePanel />
      <FAQ />
      <Footer />
      <StickyTab />

      <TweaksPanel>
        <TweakSection label="Hero layout" />
        <TweakRadio
          label="Composition"
          value={tweaks.heroLayout}
          onChange={(v) => setTweak("heroLayout", v)}
          options={[
            { value: "split",     label: "Split" },
            { value: "centered",  label: "Centered" },
            { value: "fullbleed", label: "Full-bleed" },
          ]}
        />

        <TweakSection label="CTA copy" />
        <TweakRadio
          label="Primary wording"
          value={tweaks.ctaCopy}
          onChange={(v) => setTweak("ctaCopy", v)}
          options={[
            { value: "twin",     label: "Energy Twin" },
            { value: "forecast", label: "Forecast" },
            { value: "survey",   label: "Survey" },
          ]}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Display + mono pairing"
          value={tweaks.typePair}
          onChange={(v) => setTweak("typePair", v)}
          options={[
            { value: "space-jbmono", label: "Space Grotesk + JetBrains Mono" },
            { value: "inter-jbmono", label: "Inter + JetBrains Mono" },
            { value: "space-plex",   label: "Space Grotesk + IBM Plex Mono" },
            { value: "inter-plex",   label: "Inter + IBM Plex Mono" },
          ]}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);