// BeckHost, top sections (Nav, Hero, Trust strip, About)

const Nav = ({ tweaks }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isMobile = useIsMobile();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Close menu on resize to desktop
  React.useEffect(() => {
    if (!isMobile) setMenuOpen(false);
  }, [isMobile]);

  // Prevent body scroll when menu is open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const close = () => setMenuOpen(false);
  const NAV_LINKS = [
    ["Packages", "#packages"],
    ["Find your fit", "#finder"],
    ["Work", "#work"],
    ["About", "#about"],
    ["FAQ", "#faq"],
  ];

  return (
    <React.Fragment>
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        backdropFilter: "blur(14px)",
        background: (scrolled || menuOpen) ? "color-mix(in oklab, var(--bg) 92%, transparent)" : "transparent",
        borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
        transition: "background .2s ease, border-color .2s ease",
      }}>
        <div className="container" style={{
          display:"flex", alignItems:"center", justifyContent:"space-between",
          padding: "18px 28px",
        }}>
          <a href="#top" onClick={close}><Wordmark size={20} /></a>

          {!isMobile && (
            <nav className="nav-links" style={{display:"flex", gap: 28, fontSize: 14, color:"var(--ink-2)"}}>
              {NAV_LINKS.map(([label, href]) => (
                <a key={href} href={href} className="navlink">{label}</a>
              ))}
            </nav>
          )}

          <div style={{display:"flex", alignItems:"center", gap: 10}}>
            {!isMobile && (
              <React.Fragment>
                <a href="mailto:dbeck@beckhost.net" className="nav-email" style={{fontSize:13, color:"var(--mute)", fontFamily:"var(--f-mono)"}}>dbeck@beckhost.net</a>
                <Btn kind="green" href="#contact">Free consult <Arrow/></Btn>
              </React.Fragment>
            )}
            {isMobile && (
              <button onClick={() => setMenuOpen(o => !o)}
                aria-label={menuOpen ? "Close menu" : "Open menu"}
                style={{
                  background:"transparent", border:"none", cursor:"pointer",
                  padding: 8, color:"var(--ink)", display:"flex", flexDirection:"column",
                  gap: 5, alignItems:"center", justifyContent:"center",
                }}>
                <span style={{
                  display:"block", width:22, height:2, background:"currentColor", borderRadius:2,
                  transform: menuOpen ? "translateY(7px) rotate(45deg)" : "none",
                  transition:"transform .25s ease",
                }}/>
                <span style={{
                  display:"block", width:22, height:2, background:"currentColor", borderRadius:2,
                  opacity: menuOpen ? 0 : 1,
                  transition:"opacity .2s ease",
                }}/>
                <span style={{
                  display:"block", width:22, height:2, background:"currentColor", borderRadius:2,
                  transform: menuOpen ? "translateY(-7px) rotate(-45deg)" : "none",
                  transition:"transform .25s ease",
                }}/>
              </button>
            )}
          </div>
        </div>
      </header>

      {/* Full-screen mobile menu */}
      {isMobile && (
        <div style={{
          position:"fixed", inset:0, zIndex: 40,
          background:"var(--bg)",
          display:"flex", flexDirection:"column",
          padding: "100px 32px 48px",
          transform: menuOpen ? "translateX(0)" : "translateX(100%)",
          transition:"transform .3s cubic-bezier(.4,0,.2,1)",
        }}>
          <nav style={{display:"flex", flexDirection:"column", gap: 8, flex:1}}>
            {NAV_LINKS.map(([label, href]) => (
              <a key={href} href={href} onClick={close} style={{
                fontFamily:"var(--f-display)", fontWeight:600,
                fontSize: "clamp(28px, 8vw, 40px)",
                letterSpacing:"-0.025em", color:"var(--ink)",
                padding: "10px 0",
                borderBottom:"1px solid var(--line)",
                display:"block",
              }}>{label}</a>
            ))}
          </nav>

          <div style={{marginTop: 40, display:"flex", flexDirection:"column", gap: 14}}>
            <a href="mailto:dbeck@beckhost.net" style={{
              fontFamily:"var(--f-mono)", fontSize:13, color:"var(--mute)", textAlign:"center",
            }}>dbeck@beckhost.net</a>
            <Btn kind="green" href="#contact" onClick={close} style={{width:"100%", justifyContent:"center", padding:"16px 24px", fontSize:16}}>
              Free consult <Arrow/>
            </Btn>
          </div>
        </div>
      )}
    </React.Fragment>
  );
};

const Hero = ({ tweaks }) => {
  return (
    <section id="top" style={{paddingTop: 56, paddingBottom: 64}}>
      <div className="container" style={{
        display:"grid",
        gridTemplateColumns: "var(--cols-hero)",
        gap: 56,
        alignItems: "center",
      }}>
        <div className="fade-up">
          <div style={{display:"flex", gap:10, alignItems:"center", marginBottom: 22}}>
            <span className="chip"><Dot/> Booking projects for Summer 2026</span>
            <span className="chip" style={{background:"transparent"}}>
              <span style={{fontSize:13}}>📍</span> Rochester, NH
            </span>
          </div>
          <h1>
            Websites for local businesses who run{" "}
            <span style={{position:"relative", display:"inline-block"}}>
              New England
              <svg viewBox="0 0 320 14" preserveAspectRatio="none"
                   style={{position:"absolute", left:0, right:0, bottom:-6, width:"100%", height:14}}>
                <path d="M2 9 C 80 2, 180 14, 318 6" stroke="var(--bh-green)" strokeWidth="3" fill="none" strokeLinecap="round"/>
              </svg>
            </span>
          </h1>
          <p className="lead" style={{marginTop: 26}}>
            I'm Dan, a one-person web shop based in New England. I design, build, host,
            and look after websites for small businesses across NH, MA, and VT, so you can
            keep doing the work you actually love. No agency, no jargon, no surprise bills.
          </p>
          <div style={{display:"flex", gap: 12, marginTop: 32, flexWrap:"wrap"}}>
            <Btn kind="primary" href="#contact">Get a free consultation <Arrow/></Btn>
            <Btn kind="ghost" href="#packages">See packages</Btn>
          </div>

          <div style={{
            marginTop: 44,
            display: "grid",
            gridTemplateColumns: "repeat(3, auto)",
            gap: 28,
            paddingTop: 24,
            borderTop: "1px solid var(--line)",
          }}>
            {[
              ["2 week", "typical turnaround"],
              ["1", "person you'll ever talk to"],
            ].map(([n, l]) => (
              <div key={l}>
                <div style={{fontFamily:"var(--f-display)", fontWeight:600, fontSize: 30, letterSpacing:"-0.02em"}}>{n}</div>
                <div style={{fontSize:13, color:"var(--mute)", marginTop:2}}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-visual"><HeroVisual /></div>
      </div>
    </section>
  );
};

const HeroVisual = () => (
  <div style={{position:"relative", height: 580}}>
    {/* Background sage blob */}
    <div style={{
      position:"absolute", inset:0,
      background: "radial-gradient(60% 60% at 60% 40%, var(--bh-green-soft), transparent 70%)",
      filter: "blur(8px)", zIndex: 0,
    }}/>

    {/* Pine glyph back */}
    <div style={{position:"absolute", top: 30, right: 0, opacity:.5, zIndex:0}}>
      <NHGlyph size={140} />
    </div>

    {/* Main mocked site card */}
    <div style={{
      position:"absolute",
      top: 30, left: 30, right: 30,
      animation: "float 6s ease-in-out infinite",
      zIndex: 2,
    }}>
      <BrowserFrame url="yourbusiness.com" accent="#c98d4c">
        <div style={{padding: "22px 22px 24px", background:"#fbf6ec"}}>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 18}}>
            <div style={{fontFamily:"'Bricolage Grotesque',sans-serif", fontWeight:700, color:"#3b2a18", letterSpacing:"-0.02em"}}>
              Bring your Business to the next level.
            </div>
            <div style={{display:"flex", gap:14, fontSize:11, color:"#8a6f4a"}}>
              <span>Menu</span><span>Visit</span><span>Order</span>
            </div>
          </div>
          <div style={{
            height: 168,
            borderRadius: 10,
            background: "linear-gradient(135deg, #d9c39a 0%, #c98d4c 60%, #8a5a2b 100%)",
            position:"relative", overflow:"hidden",
            display:"flex", alignItems:"flex-end", padding: 18,
          }}>
            <div style={{color:"#fff8eb"}}>
              <div style={{fontFamily:"'Bricolage Grotesque',sans-serif", fontSize: 22, fontWeight:600, letterSpacing:"-0.02em"}}>
                Modern Web Design,
              </div>
              <div style={{fontSize:11, marginTop:4, opacity:.85}}>Made affordable.</div>
            </div>
            <div style={{position:"absolute", top:14, right:14, padding:"4px 10px", borderRadius:99, background:"rgba(255,255,255,.85)", fontSize:10, color:"#3b2a18", fontWeight:500}}>
              ★ 4.9 · 312 reviews
            </div>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:8, marginTop: 12}}>
            {["Menu", "Hours", "Order online"].map(t => (
              <div key={t} style={{
                padding:"8px 10px", borderRadius:8, background:"#fff",
                border:"1px solid #e9dcc1", fontSize:11, color:"#5b452a", textAlign:"center"
              }}>{t}</div>
            ))}
          </div>
        </div>
      </BrowserFrame>
    </div>

    {/* Floating mobile mock */}
    <div style={{
      position:"absolute",
      bottom: 10, right: -6,
      width: 158, height: 312,
      borderRadius: 26,
      background: "#0e1518",
      padding: 6,
      boxShadow: "var(--shadow-lg)",
      animation: "float 7s ease-in-out infinite",
      animationDelay: "-2s",
      zIndex: 3,
      border: "1px solid var(--line-2)",
    }}>
      <div style={{
        width:"100%", height:"100%", borderRadius: 20, overflow:"hidden",
        background: "linear-gradient(180deg, #0e1518 0%, #0e1518 14%, #f5f0e3 14%)",
        position:"relative",
      }}>
        <div style={{position:"absolute", top:6, left:"50%", transform:"translateX(-50%)", width:46, height:5, background:"#000", borderRadius:99}}/>
        <div style={{padding:"46px 14px 0", color:"#3b2a18"}}>
          <div style={{fontSize: 10, fontFamily:"var(--f-mono)", color:"#8a6f4a", letterSpacing:".08em", textTransform:"uppercase", marginBottom: 6}}>Mobile first designs</div>
          <div style={{fontFamily:"'Bricolage Grotesque',sans-serif", fontSize: 18, fontWeight:600, letterSpacing:"-0.02em", color:"#3b2a18"}}>
            Many businesses report 80% of customers view their site on a phone.
          </div>
          <div style={{
            marginTop: 14, height: 100, borderRadius: 10,
            background: "linear-gradient(160deg, #e7d3d6, #c98d8d)",
          }}/>
          <div style={{
            marginTop: 12, padding: "9px 12px",
            background:"#2fb978", color:"#08110d",
            borderRadius: 99, textAlign:"center",
            fontSize: 12, fontWeight:600,
          }}>Book a consult &rarr;</div>
        </div>
      </div>
    </div>

    {/* Floating "all sites handmade in NH" sticker */}
    <div style={{
      position:"absolute", top: -8, right: 40,
      padding: "10px 14px",
      borderRadius: 12,
      background: "#0e1518",
      color: "#ecf2ef",
      transform: "rotate(4deg)",
      fontFamily: "var(--f-mono)", fontSize: 11,
      display:"flex", alignItems:"center", gap: 8,
      boxShadow: "var(--shadow-md)",
      zIndex: 5,
    }}>
      <span style={{color:"var(--bh-green-glow)"}}>●</span>
      PROUDLY MADE IN NH
    </div>
  </div>
);

const TrustStrip = () => (
  <section className="tight" style={{paddingTop: 24, paddingBottom: 56, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)"}}>
    <div className="container trust-strip" style={{
      display:"flex", alignItems:"center", justifyContent:"space-between", gap: 24, flexWrap:"wrap",
    }}>
      <div style={{fontFamily:"var(--f-mono)", fontSize:12, color:"var(--mute)", letterSpacing:".12em", textTransform:"uppercase"}}>
        Trusted by small businesses across&nbsp;
        <span style={{color:"var(--ink)"}}>NH · MA · VT</span>
      </div>
      <div className="trust-strip-logos" style={{display:"flex", gap: 36, alignItems:"center", flexWrap:"wrap", color:"var(--ink-2)"}}>
        {[
          ["JDR Automotive", "Repair shop · Rochester & Epping"],
          ["Is My Lab Legit?", "Vendor Data Analysis · Littleton, MA"],
          ["Coming soon", ""],
          ["Coming soon", ""],
          ["Coming soon", ""],
        ].map(([a, b]) => (
          <div key={a} style={{display:"flex", flexDirection:"column"}}>
            <span style={{fontFamily:"var(--f-display)", fontWeight:600, fontSize:16, letterSpacing:"-0.01em"}}>{a}</span>
            <span style={{fontSize: 11, color:"var(--mute)"}}>{b}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const About = () => (
  <section id="about" style={{background:"var(--bg-3)"}}>
    <div className="container" style={{
      display:"grid", gridTemplateColumns: "var(--cols-about)", gap: 64, alignItems:"center"
    }}>
      <div style={{position:"relative"}}>
        <div style={{
          position:"relative", borderRadius: 22, overflow:"hidden",
          aspectRatio:"4/5", boxShadow:"var(--shadow-lg)",
          background:"#0e1518",
        }}>
          <img src="assets/founder.png" alt="Beck, founder"
               style={{width:"100%", height:"100%", objectFit:"cover", display:"block", filter:"saturate(.95)"}}/>
          <div style={{
            position:"absolute", left: 16, bottom: 16,
            padding: "10px 14px", background: "rgba(255,255,255,.94)", borderRadius: 12,
            fontFamily: "var(--f-mono)", fontSize: 11,
            color: "var(--ink-2)",
          }}>
            <div style={{display:"flex", gap:8, alignItems:"center"}}>
              <span style={{color:"var(--bh-green-deep)"}}>●</span>
              Dan Beck · founder
            </div>
            <div style={{color:"var(--mute)", marginTop:2}}>7+ years in industry</div>
          </div>
        </div>
        <div style={{
          position:"absolute", top: -14, right: -14,
          padding: 14, background:"var(--bh-green)", color:"#08110d",
          borderRadius: 16, transform: "rotate(-6deg)",
          fontFamily:"var(--f-display)", fontWeight:600, fontSize: 14,
          boxShadow: "var(--shadow-md)",
          maxWidth: 130, lineHeight: 1.2, textAlign:"center",
        }}>
          One human, one inbox, one reply.
        </div>
      </div>

      <div>
        <span className="eyebrow">About</span>
        <h2 style={{marginTop: 14}}>
          You'll talk to me. Not a sales rep, not a ticket queue, not "the team."
        </h2>
        <p className="lead" style={{marginTop: 22}}>
          Beckhost is just me, Dan. With years of field experience in IT, I started this after
          watching too many friends pay $4,000 for a website they didn't understand and
          couldn't update. My job is to make the whole thing painless: I ask what your business needs, then I build it, host it, and quietly
          keep it running.
        </p>
        <div style={{
          marginTop: 30,
          display:"grid", gridTemplateColumns:"1fr 1fr", gap: 16,
        }}>
          {[
            ["Built locally", "Rochester, NH | Littleton MA"],
            ["Communication", "Text | Email | Call | In Person"],
            ["Plain English", "Hosting, domains, SSL, I'll handle everything."],
            ["Fixed price", "Quoted up front. No retainers you forgot you signed."],
          ].map(([t, d]) => (
            <div key={t} style={{display:"flex", gap: 12}}>
              <div style={{flexShrink:0, marginTop:3}}><Check/></div>
              <div>
                <div style={{fontWeight:600, fontSize:15}}>{t}</div>
                <div style={{fontSize:14, color:"var(--mute)", marginTop:2, lineHeight:1.45}}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Nav, Hero, TrustStrip, About });