/* global React, Placeholder */
const { useState: useStateHC } = React;

/* ============================================================
   Hero
   ============================================================ */
function Hero({ t, lang, layout, onCalc, onModels }) {
  return (
    <section className="hero" data-hero={layout} id="top">
      <div className="shell">
        <div className="hero__grid">
          <div className="hero__head">
            <div className="hero__eyebrow-row">
              <span className="eyebrow">{t.hero.eyebrow}</span>
              <span className="dot"></span>
              <span className="eyebrow">{t.hero.since}</span>
            </div>

            <h1 className="display hero__title">
              {t.hero.title1}{" "}
              <span className="italic">{t.hero.title2}</span>{" "}
              <br />
              {t.hero.title3}{" "}
              <span className="italic">{t.hero.title4}</span>
            </h1>

            <p className="lead hero__lead" style={{ maxWidth: "48ch" }}>
              {t.hero.lead}
            </p>

            <div className="hero__actions">
              <button className="btn btn--primary btn--lg" onClick={onCalc}>
                {t.hero.ctaPrimary} <span className="arr">→</span>
              </button>
              <button className="btn btn--ghost btn--lg" onClick={onModels}>
                {t.hero.ctaSecondary}
              </button>
            </div>
          </div>

          <div className="hero__visual">
            <Placeholder
              id="hero-visual"
              label={lang === "el" ? "ΦΩΤΟ ΞΥΛΙΝΟΥ ΣΠΙΤΙΟΥ" : "WOODEN HOUSE PHOTO"}
              shape="rect"
            />
            <div className="hero__chip">
              <div>
                <div style={{ fontSize: "11px", color: "var(--muted)", letterSpacing: ".06em", marginBottom: "2px" }}>
                  {t.hero.chipLabel}
                </div>
                <div className="price italic">{t.hero.chipPrice}</div>
              </div>
              <div className="arrow">→</div>
            </div>
          </div>
        </div>

        <div className="hero__meta-row">
          {Object.entries(t.hero.meta).map(([k, m]) => (
            <div className="hero__meta" key={k}>
              <span className="v italic">{m.v}</span>
              <span className="l">{m.l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Cost Calculator
   ============================================================ */
function Calculator({ t, lang }) {
  const [area, setArea] = useStateHC(80);
  const [tier, setTier] = useStateHC("essential");

  // Rates per sqm for p-wood products (€/sqm)
  const rates    = { essential: 650,  signature: 800,  premium: 1050 };
  const ranges   = { essential: 100,  signature: 120,  premium: 200  };
  const rate = rates[tier];
  const low  = area * (rate - ranges[tier]);
  const high = area * (rate + ranges[tier]);
  const mid  = area * rate;

  const breakdown = {
    materials: 0.45,
    installation: 0.22,
    finishes: 0.20,
    engineering: 0.13
  };

  const fmt = (n) =>
    lang === "el"
      ? n.toLocaleString("el-GR", { maximumFractionDigits: 0 })
      : n.toLocaleString("en-US", { maximumFractionDigits: 0 });
  const cur = "€";

  return (
    <section className="section" id="calculator">
      <div className="shell">
        <div className="sec-head">
          <div>
            <span className="eyebrow" style={{display:"block",marginBottom:"24px"}}>{t.calc.eyebrow}</span>
            <h2 className="h2 sec-head__title">{t.calc.title}</h2>
          </div>
          <p className="lead sec-head__lead">{t.calc.lead}</p>
        </div>

        <div className="calc">
          <div className="calc__form">
            <div className="calc__field">
              <label>{t.calc.areaLabel}</label>
              <div className="calc__slider-row">
                <span className="val italic">{area}</span>
                <span className="unit">{t.calc.unit}</span>
              </div>
              <input
                type="range"
                className="calc__slider"
                min="20"
                max="250"
                step="5"
                value={area}
                onChange={(e) => setArea(parseInt(e.target.value, 10))}
              />
              <div style={{display:"flex",justifyContent:"space-between",fontSize:"11px",color:"var(--muted)",fontFamily:"var(--font-mono)",letterSpacing:"0.1em",marginTop:"4px"}}>
                <span>20</span><span>135</span><span>250</span>
              </div>
            </div>

            <div className="calc__field">
              <label>{t.calc.tierLabel}</label>
              <div className="calc__chips">
                {Object.keys(t.calc.tiers).map((k) => (
                  <button
                    key={k}
                    className={"calc__chip" + (tier === k ? " active" : "")}
                    onClick={() => setTier(k)}
                  >
                    {t.calc.tiers[k]}
                  </button>
                ))}
              </div>
              <p style={{fontSize:"13px",color:"var(--muted)",margin:"12px 0 0",lineHeight:1.5}}>
                {t.calc.tierDesc[tier]}
              </p>
            </div>

            <div style={{paddingTop:"24px",borderTop:"1px solid var(--hairline)",fontSize:"12px",color:"var(--muted)",lineHeight:1.55}}>
              {t.calc.disclaimer}
            </div>
          </div>

          <div className="calc__result">
            <div>
              <div className="calc__price-label">{t.calc.priceLabel}</div>
              <div className="calc__price italic">
                {cur}{fmt(mid)}
              </div>
              <div className="calc__price-range">
                {t.calc.rangeLabel}: {cur}{fmt(low)} — {cur}{fmt(high)} · {cur}{fmt(rate)} {t.calc.perSqm}
              </div>
            </div>

            <div className="calc__breakdown">
              {Object.entries(t.calc.breakdown).map(([k, label]) => (
                <div className="calc__breakdown-row" key={k}>
                  <span>{label}</span>
                  <span>{cur}{fmt(mid * breakdown[k])}</span>
                </div>
              ))}
            </div>

            <div className="calc__cta">
              <a href="#contact" className="btn btn--primary">
                {t.calc.ctaPrimary} <span className="arr">→</span>
              </a>
              <a href="tel:+306932320666" className="btn btn--ghost">
                +30 6932 320666
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Calculator });