const PORTFOLIO = [
  {
    name: "JDR Automotive",
    kind: "Car repair shop · Epping & Rochester, NH",
    url: "jdrautomotive.com",
    accent: "#7a8593",
    bg: "linear-gradient(135deg, #1a1f2b 0%, #2e3440 55%, #4a5568 100%)",
    note: "Two locations, one site that actually works on mobile.",
    pkg: "Design + Hosting",
  },
  {
    name: "Is My Lab Legit?",
    kind: "Vendor Data Analysis · Littleton, MA",
    url: "ismylablegit.com",
    siteUrl: "https://ismylablegit.com",
    accent: "#4ED69C",
    bg: "linear-gradient(135deg, #0B0E14 0%, #14322a 60%, #2fa978 100%)",
    note: "Trusted vendor scores for the research community.",
    pkg: "Custom Build",
  },
  {
    name: "Coming soon",
    kind: "",
    url: "",
    accent: "#2a3344",
    bg: "linear-gradient(135deg, #131822 0%, #1c2332 100%)",
    note: "Coming soon.",
    pkg: "",
  },
  {
    name: "Coming soon",
    kind: "",
    url: "",
    accent: "#2a3344",
    bg: "linear-gradient(135deg, #131822 0%, #1c2332 100%)",
    note: "Coming soon.",
    pkg: "",
  },
  {
    name: "Coming soon",
    kind: "",
    url: "",
    accent: "#2a3344",
    bg: "linear-gradient(135deg, #131822 0%, #1c2332 100%)",
    note: "Coming soon.",
    pkg: "",
  },
];

const Portfolio = () => {
  const [active, setActive] = React.useState(0);
  const p = PORTFOLIO[active];
  return (
    <section id="work">
      <div className="container">
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-end", flexWrap:"wrap", gap: 24, marginBottom: 40}}>
          <div>
            <span className="eyebrow">Recent work</span>
            <h2 style={{marginTop: 14, maxWidth: 720}}>
              A few sites you can drive past in person.
            </h2>
          </div>
          <p style={{maxWidth: 360, color:"var(--mute)", fontSize:14}}>
            Every one of these is a real, locally-run business in NH or MA. Click any
            of them to see a closer look.
          </p>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"var(--cols-portfolio)", gap: 24, alignItems:"start"}}>
          <div style={{display:"flex", flexDirection:"column", gap: 10}}>
            {PORTFOLIO.map((item, i) => (
              <button key={item.name} onClick={() => setActive(i)}
                style={{
                  display:"flex", flexDirection:"column", textAlign:"left", gap: 6,
                  padding: "16px 20px",
                  background: active === i ? "var(--bg-2)" : "transparent",
                  border: `1px solid ${active === i ? "var(--ink)" : "var(--line)"}`,
                  borderRadius: 14,
                  cursor:"pointer",
                  fontFamily:"var(--f-body)",
                  color:"var(--ink)",
                  transition:"all .2s",
                }}
              >
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                  <span style={{fontFamily:"var(--f-display)", fontWeight:600, fontSize:18, letterSpacing:"-0.01em"}}>{item.name}</span>
                  <span style={{
                    width: 12, height: 12, borderRadius:"50%",
                    background: item.accent, opacity: active===i ? 1 : .35,
                  }}/>
                </div>
                <span style={{fontSize:13, color:"var(--mute)"}}>{item.kind}</span>
                <span style={{fontFamily:"var(--f-mono)", fontSize:11, color:"var(--bh-green-deep)", marginTop:2}}>
                  {item.pkg}
                </span>
              </button>
            ))}
          </div>

          <div>
            <BrowserFrame url={p.url} accent={p.accent}>
              <div style={{
                padding: "32px 32px 36px",
                background: p.bg,
                color: "#fff",
                minHeight: 360,
                display:"flex", flexDirection:"column", justifyContent:"space-between",
                position:"relative", overflow:"hidden",
              }}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                  <div style={{fontFamily:"'Bricolage Grotesque',sans-serif", fontWeight:700, fontSize: 20, letterSpacing:"-0.02em"}}>
                    {p.name}
                  </div>
                  <div style={{display:"flex", gap: 18, fontSize:12, opacity:.88}}>
                    <span>About</span><span>Services</span><span>Visit</span><span>Contact</span>
                  </div>
                </div>
                <div style={{maxWidth: 460, marginTop: 30}}>
                  <div style={{
                    fontFamily:"'Bricolage Grotesque',sans-serif",
                    fontSize: 40, fontWeight: 600, letterSpacing:"-0.025em", lineHeight: 1.05,
                  }}>
                    {p.note}
                  </div>
                  {p.siteUrl ? (
                    <a href={p.siteUrl} target="_blank" rel="noopener noreferrer" style={{
                      marginTop: 22, display:"inline-flex", alignItems:"center", gap:10,
                      padding:"10px 18px", background:"rgba(255,255,255,.95)", color:"#0e1518",
                      borderRadius: 99, fontSize: 13, fontWeight: 500, textDecoration:"none",
                    }}>
                      Visit the site → {p.url}
                    </a>
                  ) : (
                    <div style={{
                      marginTop: 22, display:"inline-flex", alignItems:"center", gap:10,
                      padding:"10px 18px", background:"rgba(255,255,255,.95)", color:"#0e1518",
                      borderRadius: 99, fontSize: 13, fontWeight: 500,
                    }}>
                      Visit the site → {p.url}
                    </div>
                  )}
                </div>
                <div style={{
                  position:"absolute", right:-60, bottom:-60,
                  width: 220, height: 220, borderRadius:"50%",
                  background: "rgba(255,255,255,.08)",
                }}/>
              </div>
            </BrowserFrame>

            <div style={{marginTop: 18, display:"flex", justifyContent:"space-between", fontSize:13, color:"var(--mute)"}}>
              <span>{p.kind}</span>
              <span style={{fontFamily:"var(--f-mono)"}}>Built with the {p.pkg} package</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Testimonials = () => (
  <section style={{background:"var(--bg-3)"}}>
    <div className="container">
      <div style={{maxWidth: 720, marginBottom: 48}}>
        <span className="eyebrow">In their words</span>
        <h2 style={{marginTop: 14}}>
          People who trust me to keep their site up while they run the rest of the business.
        </h2>
      </div>
      <div style={{
        padding: "56px 32px",
        borderRadius: 22,
        background: "var(--bg-2)",
        border: "1px dashed var(--line-2)",
        textAlign: "center",
        color: "var(--mute)",
      }}>
        <div style={{fontSize: 32, marginBottom: 14}}>💬</div>
        <div style={{fontFamily:"var(--f-display)", fontWeight:600, fontSize: 22, color:"var(--ink)", letterSpacing:"-0.02em"}}>Reviews coming soon</div>
        <p style={{marginTop: 10, fontSize: 14, color:"var(--mute)", maxWidth:"38ch", marginInline:"auto"}}>
          Just launched. Check back soon, or <a href="#contact" style={{color:"var(--bh-green-deep)"}}>reach out directly</a> and ask.
        </p>
      </div>
    </div>
  </section>
);


const FAQS = [
  { q: "I'm not technical at all, is that okay?",
    a: "More than okay. That's basically why this exists. You won't have to log into anything, learn a CMS, or touch a server. You tell me what your business does, I build the site, and I take care of the rest." },
  { q: "Do I need to figure out hosting and domains?",
    a: "Only if you want to. The Design + Hosting and Custom Build packages include hosting, domain registration, SSL, the whole deal. If you already own a domain, I'll move it for you, no homework on your end." },
  { q: "How long until my site is live?",
    a: "Most small business sites are live in 2-3 weeks from the time you say yes. Facelifts are usually 1-2 weeks. Custom builds with features like booking or accounts run 4-8 weeks." },
  { q: "What does it cost to keep my site running long term?",
    a: "On the Design + Hosting plan, you pay $50/month and that covers hosting, updates, security, backups, and a half hour of edits each month. No surprise invoices." },
  { q: "Do you only work with businesses in New Hampshire?",
    a: "I'm based in Rochester, NH and most clients are in NH and MA, but if you're a small business and we get along, location doesn't really matter. I've also worked with folks in VT and ME." },
  { q: "Can I move my site somewhere else later?",
    a: "Yes. Your site is yours. If you ever want to host it elsewhere, I'll hand over the files and help with the move. No lock-in, no drama." },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <div className="container" style={{display:"grid", gridTemplateColumns:"var(--cols-faq)", gap: 64, alignItems:"start"}}>
        <div>
          <span className="eyebrow">FAQ</span>
          <h2 style={{marginTop: 14}}>The questions I get on the first call.</h2>
          <p className="lead" style={{marginTop: 22}}>
            If your question isn't here, just ask. There's no AI chatbot, that's my
            actual email, and I answer it.
          </p>
          <div style={{marginTop: 26, padding: 18, borderRadius: 14, background: "var(--bg-2)", border: "1px solid var(--line)"}}>
            <div style={{fontFamily:"var(--f-mono)", fontSize: 11, color:"var(--mute)", textTransform:"uppercase", letterSpacing:".1em"}}>
              Email
            </div>
            <a href="mailto:dbeck@beckhost.net" style={{fontFamily:"var(--f-display)", fontSize: 22, fontWeight:600, letterSpacing:"-0.02em"}}>
              dbeck@beckhost.net
            </a>
          </div>
        </div>
        <div>
          {FAQS.map((f, i) => (
            <div key={i} style={{borderTop: "1px solid var(--line)", padding: "20px 0"}}>
              <button onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width:"100%", display:"flex", justifyContent:"space-between", alignItems:"center",
                  background:"transparent", border:"none", cursor:"pointer", padding:0,
                  textAlign:"left", color:"var(--ink)", fontFamily:"var(--f-body)",
                }}>
                <span style={{fontFamily:"var(--f-display)", fontWeight:600, fontSize: 19, letterSpacing:"-0.015em"}}>
                  {f.q}
                </span>
                <span style={{
                  width: 32, height: 32, borderRadius:"50%",
                  border:"1px solid var(--line-2)",
                  display:"flex", alignItems:"center", justifyContent:"center",
                  fontSize: 18,
                  transform: open === i ? "rotate(45deg)" : "none",
                  transition: "transform .2s",
                  flexShrink: 0,
                  marginLeft: 16,
                }}>+</span>
              </button>
              <div style={{
                maxHeight: open === i ? 200 : 0,
                overflow:"hidden",
                transition:"max-height .3s ease, margin .3s ease",
                marginTop: open === i ? 12 : 0,
              }}>
                <p style={{maxWidth: "60ch"}}>{f.a}</p>
              </div>
            </div>
          ))}
          <div style={{borderTop: "1px solid var(--line)"}}/>
        </div>
      </div>
    </section>
  );
};

const Contact = () => {
  const [form, setForm] = React.useState({ name:"", business:"", email:"", package:"", message:"" });
  const [sent, setSent] = React.useState(false);
  const update = (k, v) => setForm({...form, [k]: v});
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section id="contact" style={{background:"#06090F"}}>
      <div className="container" style={{display:"grid", gridTemplateColumns:"var(--cols-contact)", gap: 64, alignItems:"start"}}>
        <div>
          <span className="eyebrow" style={{color:"var(--bh-green-glow)"}}>Get in touch</span>
          <h2 style={{marginTop: 14, color:"#ffffff"}}>
            Not sure what you need? Just reach out.
          </h2>
          <p className="lead" style={{marginTop: 22, color:"rgba(255,255,255,.7)"}}>
            The first call is free, takes 20 minutes, and you'll leave with at least an
            honest opinion, even if BeckHost isn't the right fit.
          </p>

          <div style={{marginTop: 36, display:"flex", flexDirection:"column", gap: 16}}>
            {[
              ["Email", "dbeck@beckhost.net", "mailto:beck@beckhost.net"],
              ["Phonecall or Virtual Meetings setup via email"],
              ["In Person Consultations Available Upon Request"],
            ].map(([k, v, href]) => (
              <div key={k} style={{
                display:"flex", justifyContent:"space-between", alignItems:"center",
                padding:"16px 18px", borderRadius: 14,
                background:"#0d111a", border:"1px solid var(--line-2)",
              }}>
                <span style={{fontFamily:"var(--f-mono)", fontSize: 11, color:"rgba(255,255,255,.55)", textTransform:"uppercase", letterSpacing:".1em"}}>{k}</span>
                {href ? <a href={href} style={{fontWeight:500, fontSize:15}}>{v}</a> : <span style={{fontWeight:500, fontSize:15}}>{v}</span>}
              </div>
            ))}
          </div>

          <div style={{marginTop: 30, padding: 18, borderRadius: 14, background: "rgba(47,185,120,.08)", border:"1px solid rgba(47,185,120,.2)"}}>
            <div style={{display:"flex", alignItems:"center", gap: 10}}>
              <span style={{color:"var(--bh-green-glow)"}}>●</span>
              <span style={{fontFamily:"var(--f-mono)", fontSize: 12, letterSpacing:".1em", textTransform:"uppercase", color:"var(--bh-green-glow)"}}>Currently</span>
            </div>
            <p style={{marginTop: 6, color:"#ffffff", fontSize: 14, lineHeight: 1.5}}>
              Booking projects starting in <strong>June 2026</strong>. Facelifts can usually
              start within 10 days.
            </p>
          </div>
        </div>

        <form onSubmit={submit}
          style={{
            background:"#0d111a", border:"1px solid var(--line-2)",
            borderRadius: 22, padding: 32,
            display:"flex", flexDirection:"column", gap: 18,
          }}>
          {sent ? (
            <div style={{padding:"40px 10px", textAlign:"center"}}>
              <div style={{
                width: 64, height: 64, borderRadius:"50%", margin:"0 auto",
                background:"var(--bh-green)", display:"flex", alignItems:"center", justifyContent:"center",
                fontSize: 28,
              }}>✓</div>
              <h3 style={{color:"#ffffff", marginTop: 18}}>Got it, thanks {form.name.split(" ")[0] || "friend"}.</h3>
              <p style={{color:"rgba(255,255,255,.7)", marginTop: 10, maxWidth: "44ch", marginInline:"auto"}}>
                I'll get back to you within one business day, usually faster.
              </p>
              <button type="button" onClick={() => { setSent(false); setForm({name:"",business:"",email:"",package:"",message:""}); }}
                className="btn btn-ghost" style={{marginTop: 22, color:"#ffffff", borderColor:"#2b3a40"}}>
                Send another
              </button>
            </div>
          ) : (
            <React.Fragment>
              <div style={{display:"grid", gridTemplateColumns:"var(--cols-2)", gap: 14}}>
                <Field label="Your name" value={form.name} onChange={v => update("name", v)} placeholder="Your name" required/>
                <Field label="Business name" value={form.business} onChange={v => update("business", v)} placeholder="Your business"/>
              </div>
              <Field label="Email" type="email" value={form.email} onChange={v => update("email", v)} placeholder="you@example.com" required/>
              <label style={{display:"flex", flexDirection:"column", gap: 8}}>
                <span style={{fontFamily:"var(--f-mono)", fontSize: 11, color:"rgba(255,255,255,.55)", textTransform:"uppercase", letterSpacing:".1em"}}>
                  Interested in <span style={{color:"rgba(255,255,255,.3)"}}>(optional)</span>
                </span>
                <select value={form.package} onChange={e => update("package", e.target.value)}
                  style={{...fieldStyle, appearance:"none", backgroundImage:`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8593' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`, backgroundRepeat:"no-repeat", backgroundPosition:"right 14px center", paddingRight:36, cursor:"pointer"}}>
                  <option value="">Not sure yet</option>
                  <option value="Design Only">Design Only — from $200</option>
                  <option value="Design + Hosting">Design + Hosting — Free setup · $50/mo</option>
                  <option value="Facelift">Facelift — design free w/ hosting plan</option>
                  <option value="Full Custom Build">Full Custom Build — from $2,500</option>
                </select>
              </label>
              <Field label="What's on your mind?" textarea value={form.message} onChange={v => update("message", v)} placeholder="A few sentences about your business and what you need, no need to know exactly what you want yet."/>

              <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", gap: 16, marginTop: 6, flexWrap:"wrap"}}>
                <label style={{display:"flex", alignItems:"center", gap: 10, fontSize: 13, color:"rgba(255,255,255,.7)", cursor:"pointer"}}>
                  <input type="checkbox" style={{accentColor:"var(--bh-green)"}}/>
                  Also book a 20-min consult call
                </label>
                <Btn kind="green" type="submit">Send it over <Arrow/></Btn>
              </div>
            </React.Fragment>
          )}
        </form>
      </div>
    </section>
  );
};

const Field = ({ label, value, onChange, textarea, ...rest }) => (
  <label style={{display:"flex", flexDirection:"column", gap: 8}}>
    <span style={{fontFamily:"var(--f-mono)", fontSize: 11, color:"rgba(255,255,255,.55)", textTransform:"uppercase", letterSpacing:".1em"}}>
      {label}
    </span>
    {textarea ? (
      <textarea rows={5} value={value} onChange={e => onChange(e.target.value)}
        style={fieldStyle} {...rest}/>
    ) : (
      <input value={value} onChange={e => onChange(e.target.value)}
        style={fieldStyle} {...rest}/>
    )}
  </label>
);

const fieldStyle = {
  background:"#131a26",
  border:"1px solid var(--line-2)",
  borderRadius: 10,
  padding: "12px 14px",
  color:"#ffffff",
  fontFamily:"var(--f-body)",
  fontSize: 15,
  resize:"vertical",
  outline:"none",
};

const Footer = () => (
  <footer style={{padding:"56px 0 40px", borderTop:"1px solid var(--line)"}}>
    <div className="container" style={{display:"flex", justifyContent:"space-between", gap: 30, flexWrap:"wrap"}}>
      <div style={{maxWidth: 320}}>
        <Wordmark size={22}/>
        <p style={{marginTop: 16, fontSize: 14, color:"var(--mute)"}}>
          Friendly, local web development for small businesses in New Hampshire and
          Massachusetts. Built one site at a time, by one person who cares about it.
        </p>
      </div>
      <div className="footer-links" style={{display:"grid", gridTemplateColumns:"var(--cols-footer-links)", gap: 56}}>
        <FooterCol title="Site" links={[["Packages", "#packages"], ["Find your fit", "#finder"], ["Work", "#work"], ["About", "#about"], ["FAQ", "#faq"]]}/>
        <FooterCol title="Contact" links={[["dbeck@beckhost.net", "mailto:dbeck@beckhost.net"], ["Rochester, NH", null]]}/>
        <FooterCol title="The fine print" links={[["No tracking pixels", null], ["No newsletter", null], ["No AI auto-responses", null]]}/>
      </div>
    </div>
    <div className="container" style={{display:"flex", justifyContent:"space-between", marginTop: 40, fontSize: 12, color:"var(--mute)", fontFamily:"var(--f-mono)"}}>
      <span>© 2026 BeckHost · Rochester, NH</span>
    </div>
  </footer>
);

const FooterCol = ({ title, links }) => (
  <div>
    <div style={{fontFamily:"var(--f-mono)", fontSize: 11, color:"var(--mute)", textTransform:"uppercase", letterSpacing:".1em", marginBottom: 14}}>
      {title}
    </div>
    <div style={{display:"flex", flexDirection:"column", gap: 8}}>
      {links.map(([label, href]) => href ? (
        <a key={label} href={href} style={{fontSize: 14, color:"var(--ink-2)"}}>{label}</a>
      ) : (
        <span key={label} style={{fontSize: 14, color:"var(--mute)"}}>{label}</span>
      ))}
    </div>
  </div>
);

Object.assign(window, { Portfolio, Testimonials, FAQ, Contact, Footer });