/* ============ ONEDOOR APP (MAIN) ============ */

const { useState } = React;

/* === CONTENT BANK === */
const HEADLINES = [
  {
    title: "Your building, all behind one door.",
    sub: "OneDoor brings dues, documents, votes and repairs into a single, calmly-designed app for small condo buildings — built for the people who live there and the people who run them.",
  },
  {
    title: "HOA life, finally made easy.",
    sub: "Small condo buildings deserve better than spreadsheets, group chats, and binders. OneDoor replaces the mess with one simple app everyone — board, owner, manager — actually wants to open.",
  },
  {
    title: "Run your condo like you actually live there.",
    sub: "OneDoor is the warm, modern app for 5–50-unit buildings. Pay dues, sign documents, vote on repairs, and talk to your board — all without chasing anyone.",
  },
];

const LTV_OPTIONS = [
  {
    short: "50% off forever (first 50)",
    copy: <>✨ <strong>Founding Building offer</strong> — the first 50 buildings to join get <strong>50% off forever</strong>, a direct line to the founder, and a say in what we build next.</>,
  },
  {
    short: "Free for year one",
    copy: <>✨ <strong>Early-access perk</strong> — join now and your building gets <strong>OneDoor free for the first year</strong>, plus founder-level support when you need a hand.</>,
  },
  {
    short: "Locked-in launch price",
    copy: <>✨ <strong>Founder price, locked in</strong> — early buildings pay our lowest price forever, even as we add features. No surprise hikes, no tiers to upsell you into.</>,
  },
];

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "headlineIdx": 0,
  "ltvIdx": 0,
  "showProblem": true,
  "showHowItWorks": true,
  "showScreens": true,
  "showFounder": true,
  "showSocial": true,
  "showFAQ": true
}/*EDITMODE-END*/;

function App() {
  const [state, setState] = useState(DEFAULTS);
  const [openFaq, setOpenFaq] = useState(0);

  const headline = HEADLINES[state.headlineIdx] || HEADLINES[0];
  const ltv = LTV_OPTIONS[state.ltvIdx] || LTV_OPTIONS[0];

  return (
    <div className="od-root">

      {/* ===== NAV ===== */}
      <nav className="od-nav" data-screen-label="Nav">
        <div className="od-nav-inner">
          <Wordmark size={26}/>
          <div className="od-nav-links">
            <a href="#how">How it works</a>
            <a href="#screens">The app</a>
            <a href="#story">Why OneDoor</a>
            <a href="#faq">FAQ</a>
          </div>
          <a href="#waitlist"><Button variant="primary" style={{padding:"10px 18px", fontSize:14}}>Join waitlist</Button></a>
        </div>
      </nav>

      {/* ===== HERO ===== */}
      <header className="od-hero" data-screen-label="Hero">
        <div className="od-hero-bg"/>
        <div className="od-container">

          {state.heroVariant === "split" && (
            <div className="od-hero-split">
              <div>
                <span className="od-hero-eyebrow"><span className="od-hero-eyebrow-dot"/>Coming soon · early access open</span>
                <h1 className="od-hero-h1" dangerouslySetInnerHTML={{__html: headline.title.replace(/(one door|one door|easy|live there)/i, m => `<em>${m}</em>`)}}/>
                <p className="od-hero-sub">{headline.sub}</p>
                <div className="od-hero-cta-row">
                  <a href="#waitlist"><Button variant="gradient" style={{padding:"16px 28px", fontSize:17}}>Join the waitlist</Button></a>
                  <a href="#how"><Button variant="ghost" style={{padding:"16px 24px", fontSize:16}}>See how it works</Button></a>
                </div>
                <div className="od-hero-trust">
                  <span>Built for 5–50-unit buildings</span>
                  <span>Works for boards, owners &amp; managers</span>
                  <span>No app bloat</span>
                </div>
              </div>
              <div className="od-hero-stage">
                <Phone><HomeScreen/></Phone>
              </div>
            </div>
          )}

          {state.heroVariant === "centered" && (
            <div className="od-hero-centered">
              <span className="od-hero-eyebrow"><span className="od-hero-eyebrow-dot"/>Coming soon · early access open</span>
              <h1 className="od-hero-h1" dangerouslySetInnerHTML={{__html: headline.title.replace(/(one door|one door|easy|live there)/i, m => `<em>${m}</em>`)}}/>
              <p className="od-hero-sub">{headline.sub}</p>
              <div className="od-hero-cta-row">
                <a href="#waitlist"><Button variant="gradient" style={{padding:"16px 28px", fontSize:17}}>Join the waitlist</Button></a>
                <a href="#how"><Button variant="ghost" style={{padding:"16px 24px", fontSize:16}}>See how it works</Button></a>
              </div>
              <div className="od-hero-trust">
                <span>Built for 5–50-unit buildings</span>
                <span>Boards, owners &amp; managers</span>
                <span>No app bloat</span>
              </div>
              <div className="od-hero-centered-art">
                <img src="assets/onedoor-wordmark.png" alt="OneDoor"/>
              </div>
            </div>
          )}

          {state.heroVariant === "showcase" && (
            <div className="od-hero-showcase">
              <span className="od-hero-eyebrow"><span className="od-hero-eyebrow-dot"/>Coming soon · early access open</span>
              <div className="od-hero-showcase-art">
                <img src="assets/onedoor-wordmark.png" alt="OneDoor"/>
              </div>
              <h1 className="od-hero-h1" style={{maxWidth:860, margin:"0 auto 24px"}} dangerouslySetInnerHTML={{__html: headline.title.replace(/(one door|one door|easy|live there)/i, m => `<em>${m}</em>`)}}/>
              <p className="od-hero-sub" style={{margin:"0 auto 36px"}}>{headline.sub}</p>
              <div className="od-hero-cta-row">
                <a href="#waitlist"><Button variant="gradient" style={{padding:"16px 28px", fontSize:17}}>Join the waitlist</Button></a>
                <a href="#how"><Button variant="ghost" style={{padding:"16px 24px", fontSize:16}}>See how it works</Button></a>
              </div>
            </div>
          )}
        </div>
      </header>

      {/* ===== PROBLEM ===== */}
      {state.showProblem && (
        <Section id="problem"
          eyebrow="THE PROBLEM"
          title="Small buildings are stuck with tools built for no one."
          subtitle="Big property-management platforms are too complex and too expensive. Spreadsheets and group chats are too chaotic. So dues get chased, votes get lost, and small repairs turn into year-long arguments."
        >
          <div className="od-problem-grid">
            <div className="od-problem-card">
              <div className="od-problem-card-num">01 · FOR BOARDS</div>
              <h3>Chasing dues shouldn't be a second job.</h3>
              <p>You volunteered to help your building. You didn't sign up to be a debt collector, a messenger, and the keeper of every PDF.</p>
              <p className="od-problem-old">fifteen emails to collect one payment.</p>
            </div>
            <div className="od-problem-card">
              <div className="od-problem-card-num">02 · FOR OWNERS</div>
              <h3>You just want to know what's going on.</h3>
              <p>When was the last meeting? What did we vote on? Is my unit up to date? Right now, the answer is always "ask around."</p>
              <p className="od-problem-old">three group chats and a Dropbox nobody can find.</p>
            </div>
            <div className="od-problem-card">
              <div className="od-problem-card-num">03 · FOR MANAGERS</div>
              <h3>Small buildings deserve real software too.</h3>
              <p>The enterprise tools are built for 500-unit complexes. You need something that fits a 12-unit walk-up — and doesn't cost like it fits 500.</p>
              <p className="od-problem-old">software priced per-unit that assumes hundreds.</p>
            </div>
          </div>
        </Section>
      )}

      {/* ===== HOW IT WORKS ===== */}
      {state.showHowItWorks && (
        <Section id="how"
          eyebrow="HOW IT WORKS"
          title="Four steps. One door."
          subtitle="From first signup to your building running itself in an afternoon."
        >
          <div className="od-how-grid">
            <div className="od-how-step">
              <div className="od-how-step-n">01</div>
              <h3>Create your building</h3>
              <p>Name it, add units, invite the board and residents. Takes about five minutes.</p>
            </div>
            <div className="od-how-step">
              <div className="od-how-step-n">02</div>
              <h3>Set up dues</h3>
              <p>Monthly amount, due date, auto-pay. We handle reminders so you don't have to.</p>
            </div>
            <div className="od-how-step">
              <div className="od-how-step-n">03</div>
              <h3>Upload what matters</h3>
              <p>Bylaws, insurance, minutes, photos. Everything in one place, searchable by everyone.</p>
            </div>
            <div className="od-how-step">
              <div className="od-how-step-n">04</div>
              <h3>Run the building</h3>
              <p>Vote on repairs, file service requests, message your neighbours. No more phone trees.</p>
            </div>
          </div>
        </Section>
      )}

      {/* ===== SCREENS ===== */}
      {state.showScreens && (
        <section id="screens" className="od-screens" data-screen-label="Screens">
          <div className="od-screens-glow"/>
          <div className="od-container od-align-center">
            <div className="od-section-head" style={{textAlign:"center", marginLeft:"auto", marginRight:"auto"}}>
              <div className="od-eyebrow">INSIDE THE APP</div>
              <h2 className="od-h2">Calm by design. Clear on purpose.</h2>
              <p className="od-subtitle">Warm, readable, and built for anyone from 35 to 85. No cluttered dashboards — just what you need, when you need it.</p>
            </div>
            <div className="od-screens-stage">
              <Phone tilt={-4}><PaymentsScreen/></Phone>
              <Phone><HomeScreen/></Phone>
              <Phone tilt={4}><BoardScreen/></Phone>
            </div>
          </div>
        </section>
      )}

      {/* ===== FOUNDER NOTE ===== */}
      {state.showFounder && (
        <section className="od-founder" data-screen-label="Founder">
          <div className="od-container">
            <div className="od-founder-card">
              <div className="od-founder-avatar">OD</div>
              <div className="od-founder-text">
                <div className="od-eyebrow" style={{marginBottom:14}}>A NOTE FROM THE FOUNDER</div>
                <p className="od-founder-quote">"I lived in a 14-unit building where the board kept minutes in a shared email account and chased dues on WhatsApp. We were smart people running a small business together — just with none of the tools. OneDoor is the app I wished we had. If you're building it with us early, you'll shape what it becomes."</p>
                <div className="od-founder-name">The OneDoor team</div>
                <div className="od-founder-role">Building from a 14-unit walk-up near you</div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* ===== SOCIAL / TESTIMONIAL PLACEHOLDER ===== */}
      {state.showSocial && (
        <Section id="voices"
          eyebrow="EARLY VOICES"
          title="From the buildings shaping OneDoor."
          subtitle="We're talking to boards, owners and managers every week. A few early reactions:"
          align="center"
        >
          <div className="od-social-grid">
            <div className="od-quote">
              <div className="od-quote-stars">★★★★★</div>
              <p className="od-quote-body">"We've spent three years looking for something that fits a 16-unit building. Everything is either a spreadsheet or priced for skyscrapers. This is the first thing that feels right."</p>
              <div className="od-quote-who">
                <div className="od-quote-avatar">MR</div>
                <div>
                  <div className="od-quote-name">Maria R.</div>
                  <div className="od-quote-role">Board president · 16 units</div>
                </div>
              </div>
            </div>
            <div className="od-quote">
              <div className="od-quote-stars">★★★★★</div>
              <p className="od-quote-body">"I just want to know when the next meeting is and what we decided. If it shows me that on one screen, I'm in."</p>
              <div className="od-quote-who">
                <div className="od-quote-avatar">JT</div>
                <div>
                  <div className="od-quote-name">James T.</div>
                  <div className="od-quote-role">Owner · Unit 4B</div>
                </div>
              </div>
            </div>
            <div className="od-quote">
              <div className="od-quote-stars">★★★★★</div>
              <p className="od-quote-body">"I manage seven small buildings. If I can stop juggling seven email threads and one mess of folders, OneDoor pays for itself in a week."</p>
              <div className="od-quote-who">
                <div className="od-quote-avatar">AN</div>
                <div>
                  <div className="od-quote-name">Anita N.</div>
                  <div className="od-quote-role">Property manager · 7 buildings</div>
                </div>
              </div>
            </div>
          </div>
          <div className="od-social-note">· early research conversations · full case studies at launch ·</div>
        </Section>
      )}

      {/* ===== WAITLIST ===== */}
      <section id="waitlist" className="od-waitlist" data-screen-label="Waitlist">
        <div className="od-waitlist-bg"/>
        <div className="od-container">
          <div className="od-waitlist-inner">
            <div className="od-eyebrow">JOIN THE WAITLIST</div>
            <h2 className="od-h2">Be first through the door.</h2>
            <p className="od-subtitle">Tell us who you are and your building. Early signups get the Founding Building offer and a direct line to us as we build.</p>
            <WaitlistForm ltvCopy={ltv.copy}/>
          </div>
        </div>
      </section>

      {/* ===== FAQ ===== */}
      {state.showFAQ && (
        <Section id="faq" eyebrow="FAQ" title="Common questions." align="center">
          <div className="od-faq-list">
            {[
              { q:"When will OneDoor launch?", a:"Soon. We're onboarding a small group of founding buildings first so we can get things right. Join the waitlist and we'll reach out when your turn comes up." },
              { q:"How much will it cost?", a:"We're still finalising pricing for small buildings, but it will be a flat monthly per-building fee — not per-unit. Waitlist members get locked-in founder pricing and never pay more, even when prices go up." },
              { q:"Does my whole building need to join?", a:"Nope. You can start with just the board, add owners as they're ready, and invite your property manager whenever you'd like. Nobody needs a tech background — if you can text, you can use OneDoor." },
              { q:"Is my building's data private?", a:"Yes. Your building's data is yours. It's never sold, never shared, and only visible to people your board invites. Individual payment details are encrypted end-to-end." },
              { q:"What if we already use another tool?", a:"We'll help you move over. Dues ledgers, documents, owner lists — bring a CSV and we'll handle the rest. Most buildings are fully migrated in an afternoon." },
              { q:"Can I get a demo before signing up?", a:"Absolutely. Once you're on the waitlist, reply to our first email and we'll book 20 minutes to walk you through it live." },
            ].map((item, i) => (
              <FAQ key={i} {...item} open={openFaq===i} onClick={()=>setOpenFaq(openFaq===i?-1:i)}/>
            ))}
          </div>
        </Section>
      )}

      {/* ===== FOOTER ===== */}
      <footer className="od-footer">
        <div className="od-container od-footer-inner">
          <Wordmark size={22}/>
          <div className="od-footer-links">
            <a href="#waitlist">Join waitlist</a>
            <a href="#how">How it works</a>
            <a href="#faq">FAQ</a>
            <a href="mailto:hello@onedoorapp.com">hello@onedoorapp.com</a>
          </div>
          <div className="od-footer-copy">ONEDOOR · 2026 · ONEDOORAPP.COM</div>
        </div>
      </footer>

      <TweaksPanel state={state} setState={setState} defaults={{ headlines: HEADLINES, ltvOptions: LTV_OPTIONS }}/>
    </div>
  );
}

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