/* Home page */

const Home = () => (
  <>
    <Ticker />
    <HomeHero />
    <ProblemSection />
    <BenefitsSection />
    <CombinationSection />
    <CompatibilityStrip />
    <ReviewsSection />
    <FaqPreview />
    <FinalCta />
  </>
);

const HomeHero = () => {
  const { t, lang } = useLang();
  const names = getHeroDeviceNames();
  const [index, setIndex] = React.useState(0);
  const [fading, setFading] = React.useState(false);
  const heroName = names[index] || 'Elfbar';

  React.useEffect(() => {
    if (names.length <= 1) return undefined;
    const timer = setInterval(() => {
      setFading(true);
      window.setTimeout(() => {
        setIndex((current) => (current + 1) % names.length);
        setFading(false);
      }, 260);
    }, 3800);
    return () => clearInterval(timer);
  }, [names.length]);

  return (
    <section className="section">
      <div className="container">
        <div className="hero-grid">
          <div className="stack" style={{ gap: 26 }}>
            <div className="eyebrow">{t.home.eyebrow}</div>
            <h1 className="h-display">
              {t.home.headlinePrefix}{' '}
              <span className={'hero-device' + (fading ? ' fade' : '')}>{heroName}.</span>
            </h1>
            <p className="lead" style={{ maxWidth: 590 }}>{t.home.sub}</p>
            <div className="row wrap">
              <Link to="/configurator" className="btn btn-primary btn-lg btn-arrow">
                {t.common.configureYours}
              </Link>
              <Link to="/product" className="btn btn-secondary btn-lg">
                {t.common.seeProduct}
              </Link>
            </div>
            <div className="hero-stats">
              <HeroStat n="01" label={t.home.stat1Label} value={t.home.stat1Value} />
              <HeroStat n="02" label={t.home.stat2Label} value={t.home.stat2Value} />
              <HeroStat n="03" label={t.home.stat3Label} value={t.home.stat3Value} />
            </div>
          </div>
          <div>
            <ProductPreview config={{ ...DEFAULT_CONFIG, customText: lang === 'it' ? 'TUA' : 'YOURS' }} size="xl" />
          </div>
        </div>
      </div>
    </section>
  );
};

const HeroStat = ({ n, label, value }) => (
  <div className="stat">
    <div className="mono-sm">{n} / {label}</div>
    <div className="stat-value">{value}</div>
  </div>
);

const ProblemSection = () => {
  const { t } = useLang();
  return (
    <section className="section band">
      <div className="container stack" style={{ gap: 32 }}>
        <div className="row-between wrap">
          <div className="stack" style={{ gap: 14 }}>
            <div className="eyebrow">{t.home.problem.eyebrow}</div>
            <h2 className="h-1">{t.home.problem.title}</h2>
          </div>
          <p className="lead" style={{ maxWidth: 420 }}>{t.home.problem.sub}</p>
        </div>
        <div className="grid cols-4">
          {t.home.problem.items.map((item) => (
            <div className="surface-plain stack" key={item.n} style={{ padding: 22, minHeight: 190, justifyContent: 'space-between' }}>
              <div className="mono-sm">{item.n}</div>
              <div>
                <h3 className="h-3">{item.title}</h3>
                <p className="body-muted">{item.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const BenefitsSection = () => {
  const { t } = useLang();
  const previewBody = BODY_COLORS[1] || BODY_COLORS[0] || { key: DEFAULT_CONFIG.bodyColor };
  const previewCap = CAP_COLORS[0] || { key: DEFAULT_CONFIG.capColor };
  const preview = { ...DEFAULT_CONFIG, bodyColor: previewBody.key, capColor: previewCap.key, customText: 'DAILY', symbols: ['✓'] };
  return (
    <section className="section">
      <div className="container split">
        <div className="stack" style={{ gap: 20 }}>
          <div className="eyebrow">{t.home.benefits.eyebrow}</div>
          <h2 className="h-1">{t.home.benefits.title}</h2>
          <p className="lead">{t.home.benefits.sub}</p>
          <div className="stack">
            {t.home.benefits.items.map((item) => (
              <div className="row" key={item.n} style={{ alignItems: 'flex-start', paddingTop: 14, borderTop: '1px solid var(--border)' }}>
                <span className="mono-sm" style={{ minWidth: 34 }}>{item.n}</span>
                <div>
                  <h3 className="h-3">{item.title}</h3>
                  <p className="body-muted">{item.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <ProductPreview config={preview} size="xl" />
      </div>
    </section>
  );
};

const CombinationSection = () => {
  const { t, lang } = useLang();
  const bodies = BODY_COLORS.length ? BODY_COLORS.slice(0, 4) : [{ key: DEFAULT_CONFIG.bodyColor, displayNameEn: 'Titan' }];
  const caps = CAP_COLORS.length ? CAP_COLORS : [{ key: DEFAULT_CONFIG.capColor }];
  const combos = bodies.map((body, index) => {
    const cap = caps[index % caps.length];
    return {
      name: body.displayNameEn || body.name || `Color ${index + 1}`,
      bodyColor: body.key,
      capColor: cap.key,
      customText: index === 0 ? 'TITAN' : '',
      symbols: index === 0 ? ['◆'] : []
    };
  });

  return (
    <section className="section">
      <div className="container stack" style={{ gap: 28 }}>
        <div className="row-between wrap">
          <div className="stack" style={{ gap: 12 }}>
            <div className="eyebrow">{t.home.combos.eyebrow}</div>
            <h2 className="h-1">{t.home.combos.title}</h2>
          </div>
          <Link to="/configurator" className="btn btn-secondary btn-arrow">{t.home.combos.build}</Link>
        </div>
        <div className="grid cols-4">
          {combos.map((combo, index) => {
            const cfg = { ...DEFAULT_CONFIG, ...combo };
            return (
              <Link
                to="/configurator"
                key={combo.name}
                className="stack"
                style={{ gap: 12 }}
                onClick={() => persistDraftConfig(cfg)}
              >
                <ProductPreview config={cfg} size="md" animated={false} />
                <div className="row-between">
                  <div>
                    <div className="mono-sm">CMB.{String(index + 1).padStart(2, '0')}</div>
                    <strong>{combo.name}</strong>
                  </div>
                  <span className="mono-sm">{formatMoney(calcPrice(cfg), lang)}</span>
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const CompatibilityStrip = () => {
  const { t } = useLang();
  const device = CFG.devices[0];
  return (
    <section className="section-tight band">
      <div className="container row-between wrap">
        <div className="stack" style={{ gap: 6 }}>
          <div className="eyebrow">{t.home.compatibility.eyebrow}</div>
          <h2 className="h-2">{t.home.compatibility.title}: {device.displayName}</h2>
          <p className="body-muted">{t.home.compatibility.body}</p>
        </div>
        <Link to="/compatibility" className="btn btn-secondary btn-arrow">{t.home.compatibility.request}</Link>
      </div>
    </section>
  );
};

const FaqPreview = () => {
  const { t } = useLang();
  return (
    <section className="section">
      <div className="container split">
        <div className="stack" style={{ gap: 16 }}>
          <div className="eyebrow">{t.home.faqPreview.eyebrow}</div>
          <h2 className="h-1">{t.home.faqPreview.title}</h2>
          <Link to="/faq" className="btn btn-secondary btn-arrow" style={{ width: 'fit-content' }}>
            {t.home.faqPreview.all}
          </Link>
        </div>
        <div>
          {t.faq.items.slice(0, 4).map((item, index) => (
            <details key={item.q} open={index === 0} style={{ borderTop: '1px solid var(--border)', padding: '18px 0' }}>
              <summary className="row-between">
                <strong>{item.q}</strong>
                <span className="mono-sm">{String(index + 1).padStart(2, '0')}</span>
              </summary>
              <p className="body-muted">{item.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCta = () => {
  const { t } = useLang();
  return (
    <section className="section band">
      <div className="container stack" style={{ gap: 22, textAlign: 'center', alignItems: 'center' }}>
        <div className="eyebrow">{t.home.finalCta.eyebrow}</div>
        <h2 className="h-display">{t.home.finalCta.title}</h2>
        <p className="lead" style={{ maxWidth: 620 }}>{t.home.finalCta.sub}</p>
        <Link to="/configurator" className="btn btn-primary btn-lg btn-arrow">
          {t.home.finalCta.button}
        </Link>
      </div>
    </section>
  );
};

window.Home = Home;
window.FaqPreview = FaqPreview;
window.FinalCta = FinalCta;