// App.jsx — BarberMaxx landing page.
// Composed of: Header, Hero (beams), Trust, SpecStrip, Features,
// Lifestyle, Testimonials, FinalCTA (beams), Footer.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "beamIntensity": "medium",
  "beamTint": "neutral",
  "showParticles": true,
  "heroLayout": "split",
  "accent": "red",
  "showLogoMark": true
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // IntersectionObserver to reveal elements
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-visible");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Override accent variable based on tweak
  const accentOverride = t.accent === "blue" ?
  { "--accent": "var(--bm-blue)", "--accent-hover": "#6499D8", "--accent-press": "#3A6FAE", "--shadow-red": "0 6px 24px rgba(79,134,198,0.4)" } :
  t.accent === "white" ?
  { "--accent": "#fff", "--accent-hover": "#eaeaea", "--accent-press": "#cccccc", "--shadow-red": "0 6px 24px rgba(255,255,255,0.18)" } :
  {};

  return (
    <div style={accentOverride}>
      <Header scrolled={scrolled} showLogoMark={t.showLogoMark} />
      <Hero
        beamTint={t.beamTint}
        beamIntensity={t.beamIntensity}
        showParticles={t.showParticles}
        layout={t.heroLayout} />
      
      <Trust />
      <SpecStrip />
      <Features />
      <Lifestyle />
      <Testimonials />
      <FinalCTA
        beamTint={t.beamTint}
        beamIntensity={t.beamIntensity}
        showParticles={t.showParticles} />
      
      <Footer />

      <BarberTweaks t={t} setTweak={setTweak} />
    </div>);

}

/* ------------------------------------------------------------------ */
/* HEADER                                                              */
/* ------------------------------------------------------------------ */
function Header({ scrolled, showLogoMark }) {
  return (
    <header className={`site-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container-wide">
        <a href="#top" className="brand-mark" aria-label="BarberMaxx home">
          {showLogoMark && <span className="brand-mark__logo"><img src="assets/emblem.webp" alt="" /></span>}
          <span className="brand-mark__name">
            <span>BARBERMAXX</span>
            <span className="brand-mark__tag">UNITED STATES</span>
          </span>
        </a>
        <nav className="site-nav" aria-label="Primary">
          <a href="#chair" className="hide-mobile">Chair</a>
          <a href="#features" className="hide-mobile">Features</a>
          <a href="#shop" className="hide-mobile">The Shop</a>
          <a href="#reviews" className="hide-mobile">Reviews</a>
          <a href="#quote" className="nav-cta">Get a Quote</a>
        </nav>
      </div>
    </header>);

}

/* ------------------------------------------------------------------ */
/* HERO                                                                */
/* ------------------------------------------------------------------ */
function Hero({ beamTint, beamIntensity, showParticles, layout }) {
  return (
    <section id="top" className="hero">
      <BeamsBackground
        intensity={beamIntensity}
        tint={beamTint}
        beamCount={18}
        showParticles={showParticles}
        particleCount={28} />
      

      <div className="container-wide">
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="eyebrow reveal">★ AMERICAN-MADE LUXURY · EST. SHOP-FLOOR</span>
            <h1 className="hero-title reveal" data-delay="1">
              Built For<br />
              <span className="ink-red">Elite</span> Barbers.
            </h1>
            <p className="hero-sub reveal" data-delay="2">
              Luxury barber chairs engineered for performance, comfort,
              and presence. Tufted leather. Solid steel. Hand-finished
              for the shop that stays open late.
            </p>
            <div className="hero-ctas reveal" data-delay="3">
              <a href="#chair" className="btn btn--primary btn--lg">
                Shop Now
                <span className="arrow"><Icon name="arrow-right" size={16} /></span>
              </a>
              <a href="#quote" className="btn btn--ghost btn--lg">
                Get a Quote
              </a>
            </div>

            <div className="hero-meta reveal" data-delay="4">
              <div className="hero-meta__item">
                <div className="num">350<span style={{ fontSize: 18, color: 'var(--fg-3)', marginLeft: 4 }}>lb</span></div>
                <div className="lbl">Weight Capacity</div>
              </div>
              <div className="hero-meta__item">
                <div className="num">12<span style={{ fontSize: 18, color: 'var(--fg-3)', marginLeft: 4 }}>·pos</span></div>
                <div className="lbl">Recline System</div>
              </div>
            </div>
          </div>

          <div className="hero-product reveal" data-delay="2">
            <div className="hero-product__halo" />
            <video
              className="hero-product__img"
              src="assets/chair-video.webm"
              poster="assets/hero-chair.webp"
              autoPlay
              muted
              loop
              playsInline
              preload="auto"
              onError={(e) => { e.currentTarget.src = "assets/chair-video.mp4"; }}
            />
            <div className="hero-product__spotlight" />
            <div className="hero-product__frame" />
            <span className="crosshair crosshair--tl" />
            <span className="crosshair crosshair--tr" />
            <span className="crosshair crosshair--bl" />
            <span className="crosshair crosshair--br" />

            <div className="hero-product__caption">
              <div className="lbl">Hawk Capitonê · Inox</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/* TRUST                                                               */
/* ------------------------------------------------------------------ */
function Trust() {
  const items = [
  { icon: "leaf", title: "Premium Materials", copy: "Full-grain tufted leather. Solid steel. Hand-finished hardwood footrest." },
  { icon: "armchair", title: "Ergonomic Design", copy: "12-position recline, lumbar support, balanced headrest. Built around the cut." },
  { icon: "shield-check", title: "Heavy-Duty Construction", copy: "350 lb capacity. Cast iron base. Engineered to outlast a 60-hour week." },
  { icon: "award", title: "American Barber Standards", copy: "Compliant, certified, and supported from our Florida service hub." }];

  return (
    <section className="trust">
      <div className="trust__grid">
        {items.map((it, i) =>
        <div key={i} className="trust__item reveal" data-delay={i + 1}>
            <div className="trust__icon"><Icon name={it.icon} size={28} stroke={1.5} /></div>
            <div className="trust__title">{it.title}</div>
            <div className="trust__copy">{it.copy}</div>
          </div>
        )}
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/* SPEC STRIP (marquee)                                                */
/* ------------------------------------------------------------------ */
function SpecStrip() {
  const items = [
  "Tufted Capitonê Leather",
  "Hydraulic Steel Base",
  "12-Position Recline",
  "Hand-Finished Wood",
  "Industrial Frame",
  "350 lb Capacity"];

  const loop = [...items, ...items];
  return (
    <div className="spec-strip" aria-hidden="true">
      <div className="spec-strip__track">
        {loop.map((s, i) =>
        <span key={i} className="spec-strip__item">
            {s}
            <span className="sep" />
          </span>
        )}
      </div>
    </div>);

}

/* ------------------------------------------------------------------ */
/* FEATURES                                                            */
/* ------------------------------------------------------------------ */
function Features() {
  const feats = [
  { icon: "arrow-up-down", title: "Reclining System", copy: "Twelve locked positions, from upright cut to full shave lay-back. Smooth dampened motion.", tags: ["Hydraulic", "Locked"] },
  { icon: "leaf", title: "Premium Leather", copy: "Full-grain tufted capitonê leather. Resists oils, color, and a long Saturday rotation.", tags: ["Full-grain", "Tufted"] },
  { icon: "gauge", title: "Hydraulic Base", copy: "Pneumatic pump with 6 inches of travel. Cast iron, sealed bearings, zero wobble.", tags: ["6\" Travel", "Sealed"] },
  { icon: "armchair", title: "Adjustable Footrest", copy: "Hand-finished hardwood footrest folds out and locks. Hawk emblem branded inlay.", tags: ["Hardwood", "Inlaid"] },
  { icon: "layers", title: "Industrial Frame", copy: "Single-piece welded steel chassis. Powder-coated. Built to be moved, mounted, abused.", tags: ["Welded", "Coated"] },
  { icon: "flame", title: "Maximum Comfort", copy: "Deep cushion fill, balanced lumbar, contoured headrest. Your client will fall asleep.", tags: ["Lumbar", "Balanced"] }];

  return (
    <section id="features" className="section features">
      <div className="container-wide">
        <div className="section-head">
          <div className="reveal">
            <span className="eyebrow">Engineering</span>
            <h2 className="section-head__title">
              Six reasons<br />
              <span className="accent">it&apos;s heavier</span> than yours.
            </h2>
          </div>
          <p className="section-head__sub reveal" data-delay="1">
            Every component is specified for the shop floor — not a showroom.
            We do not ship plastic, painted MDF, or chrome-look stickers.
            What you see is what holds a 350 pound client through a full day.
          </p>
        </div>

        <div className="feature-grid">
          {feats.map((f, i) =>
          <div key={i} className="feature reveal" data-delay={Math.min(5, i + 1)}>
              <span className="feature__num">/{String(i + 1).padStart(2, "0")}</span>
              <div className="feature__icon">
                <Icon name={f.icon} size={22} stroke={1.6} />
              </div>
              <div className="feature__title">{f.title}</div>
              <div className="feature__copy">{f.copy}</div>
              <div className="feature__meta">
                {f.tags.map((t, j) => <span key={j}>{t}</span>)}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/* LIFESTYLE                                                           */
/* ------------------------------------------------------------------ */
function Lifestyle() {
  return (
    <section id="shop" className="section lifestyle">
      <div className="container-wide">
        <div className="section-head">
          <div className="reveal">
            <span className="eyebrow">The Shop</span>
            <h2 className="section-head__title">
              Quiet luxury.<br />
              <span className="blue">Loud craft.</span>
            </h2>
          </div>
          <p className="section-head__sub reveal" data-delay="1">
            Shops running the Hawk Capitonê line move through ten cuts
            an hour and look like a movie set doing it. Black walls,
            granite floors, polished leather. The chair belongs.
          </p>
        </div>

        <div className="lifestyle-grid reveal">
          <div className="lf-cell lf-cell--lg">
            <img src="assets/lifestyle-shave.webp" alt="Hot towel shave on the Hawk Capitonê" />
            <div className="lf-cell__overlay" />
            <div className="lf-cell__body">
              <div className="lf-cell__eyebrow">Inside The Cut</div>
              <div className="lf-cell__title">The chair behind<br />the best fade in town.</div>
              <p className="lf-cell__copy">
                Hot-towel shaves, straight-razor work, full-recline relaxation —
                the geometry of the chair was designed around the way an
                elite barber actually moves. Less reaching. More precision.
              </p>
            </div>
          </div>
          <div className="lf-cell lf-cell--sm">
            <img src="assets/lifestyle-cut.webp" alt="Barber working at a Hawk Capitonê chair" />
            <div className="lf-cell__overlay" />
            <div className="lf-cell__body">
              <div className="lf-cell__eyebrow">Built for Hours</div>
              <div className="lf-cell__title">Saturday-proof.</div>
            </div>
          </div>
          <div className="lf-cell lf-cell--sm">
            <img src="assets/chair-side.webp" alt="Hawk Capitonê profile detail with carved hawk emblem" />
            <div className="lf-cell__overlay" />
            <div className="lf-cell__body">
              <div className="lf-cell__eyebrow">Signature Detail</div>
              <div className="lf-cell__title">The Hawk emblem.</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/* TESTIMONIALS                                                        */
/* ------------------------------------------------------------------ */
function Testimonials() {
  const items = [
  {
    quote: "Six chairs, four years, zero service calls. The hydraulic still feels like the day we bolted them in.",
    name: "Marcus Vega",
    role: "Owner · Vega Barber Co · Brooklyn NY",
    initials: "MV"
  },
  {
    quote: "Clients book just to sit in it. I charge ten dollars more on this chair than the other two — they pay it.",
    name: "Damon Reyes",
    role: "Master Barber · Reyes Cuts · Miami FL",
    initials: "DR"
  },
  {
    quote: "Nothing in my shop has the presence this chair has. It changed the floor plan. It changed the brand.",
    name: "Theo Whitlock",
    role: "Founder · The Whitlock Room · Chicago IL",
    initials: "TW"
  }];

  return (
    <section id="reviews" className="section">
      <div className="container-wide">
        <div className="section-head">
          <div className="reveal">
            <span className="eyebrow">★ ★ ★ ★ ★ &nbsp;Verified Owners</span>
            <h2 className="section-head__title">
              Owned by the<br />
              <span className="accent">best shops</span> in America.
            </h2>
          </div>
          <p className="section-head__sub reveal" data-delay="1">
            Over 1,800 Hawk Capitonê chairs are running in barbershops
            from Brooklyn to Long Beach. Here is what the owners say
            when nobody is paying for the quote.
          </p>
        </div>
        <div className="tcards">
          {items.map((it, i) =>
          <div key={i} className="tcard reveal" data-delay={i + 1}>
              <div className="tcard__stars">
                {Array.from({ length: 5 }).map((_, j) => <Icon key={j} name="star" size={14} />)}
              </div>
              <div className="tcard__quote">{it.quote}</div>
              <div className="tcard__person">
                <div className="tcard__avatar">{it.initials}</div>
                <div>
                  <div className="tcard__name">{it.name}</div>
                  <div className="tcard__role">{it.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/* FINAL CTA                                                           */
/* ------------------------------------------------------------------ */
function FinalCTA({ beamTint, beamIntensity, showParticles }) {
  return (
    <section id="quote" className="final-cta">
      <BeamsBackground
        intensity={beamIntensity === "subtle" ? "medium" : "dramatic"}
        tint={beamTint === "neutral" ? "mixed" : beamTint}
        beamCount={22}
        showParticles={showParticles}
        particleCount={32} />
      
      <div className="container">
        <span className="eyebrow final-cta__eyebrow reveal">★ Upgrade Your Floor</span>
        <h2 className="final-cta__title reveal" data-delay="1">
          Upgrade your<br />
          barbershop experience.
        </h2>
        <p className="final-cta__sub reveal" data-delay="2">
          Order your Barber Maxx chair today. Financing available.
          White-glove delivery anywhere in the lower 48.
        </p>
        <div className="final-cta__ctas reveal" data-delay="3">
          <a href="#chair" className="btn btn--primary btn--lg">
            Order Your Barber Maxx Chair
            <span className="arrow"><Icon name="arrow-right" size={16} /></span>
          </a>
          <a href="#quote" className="btn btn--ghost btn--lg">
            Talk to a Specialist
          </a>
        </div>
        <div className="final-cta__guarantee reveal" data-delay="4">
          <span>5-Year Frame Warranty</span>
          <span>White-Glove Delivery</span>
          <span>30-Day Returns</span>
          <span>Financing Available</span>
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/* FOOTER                                                              */
/* ------------------------------------------------------------------ */
function Footer() {
  return (
    <>
      <div className="pole-line" />
      <footer className="site-footer">
        <div className="container-wide">
          <div className="footer-grid">
            <div className="footer-brand">
              <a className="brand-mark" href="#top">
                <span className="brand-mark__logo"><img src="assets/emblem.webp" alt="" /></span>
                <span className="brand-mark__name">
                  <span>BARBERMAXX</span>
                  <span className="brand-mark__tag">UNITED STATES</span>
                </span>
              </a>
              <p>Premium American-imported barber chairs, hand-built in Brazil, supported from Florida. Built for the barber who stays late.</p>
            </div>
            <div className="footer-col">
              <div className="footer-col__title">Shop</div>
              <ul>
                <li><a href="#">Hawk Capitonê Inox</a></li>
                <li><a href="#">Hawk Capitonê Black</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">Replacement Parts</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <div className="footer-col__title">Support</div>
              <ul>
                <li><a href="#">Get a Quote</a></li>
                <li><a href="#">Financing</a></li>
                <li><a href="#">Shipping &amp; Returns</a></li>
                <li><a href="#">Warranty</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <div className="footer-col__title">Company</div>
              <ul>
                <li><a href="#">Our Story</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Wholesale</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
          </div>
          <div className="footer-bar">
            <div>© 2026 BarberMaxx United States, LLC. Hand-built in Brazil. Supported in Tampa, FL.</div>
            <div className="footer-social">
              <a href="#" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
              <a href="#" aria-label="YouTube"><Icon name="youtube" size={16} /></a>
              <a href="#" aria-label="Facebook"><Icon name="facebook" size={16} /></a>
              <a href="#" aria-label="X"><Icon name="x" size={16} /></a>
            </div>
          </div>
        </div>
      </footer>
    </>);

}

/* ------------------------------------------------------------------ */
/* TWEAKS PANEL                                                        */
/* ------------------------------------------------------------------ */
function BarberTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Cinematic Beams">
        <TweakRadio
          label="Intensity"
          value={t.beamIntensity}
          options={[
          { value: "subtle", label: "Subtle" },
          { value: "medium", label: "Medium" },
          { value: "dramatic", label: "Dramatic" }]
          }
          onChange={(v) => setTweak("beamIntensity", v)} />
        
        <TweakSelect
          label="Beam Tint"
          value={t.beamTint}
          options={[
          { value: "neutral", label: "Neutral steel" },
          { value: "blue", label: "Barber-pole blue" },
          { value: "red", label: "Barber-pole red" },
          { value: "mixed", label: "Red + Blue mix" }]
          }
          onChange={(v) => setTweak("beamTint", v)} />
        
        <TweakToggle
          label="Floating particles"
          value={t.showParticles}
          onChange={(v) => setTweak("showParticles", v)} />
        
      </TweakSection>

      <TweakSection label="Brand">
        <TweakRadio
          label="Accent"
          value={t.accent}
          options={[
          { value: "red", label: "Red" },
          { value: "blue", label: "Blue" },
          { value: "white", label: "Mono" }]
          }
          onChange={(v) => setTweak("accent", v)} />
        
        <TweakToggle
          label="Show logo mark"
          value={t.showLogoMark}
          onChange={(v) => setTweak("showLogoMark", v)} />
        
      </TweakSection>
    </TweaksPanel>);

}

/* ------------------------------------------------------------------ */
/* MOUNT                                                               */
/* ------------------------------------------------------------------ */
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);