main.py

from __future__ import annotations

from typing import Optional

from fasthtml.common import *  # type: ignore[wildcard-import]


app, rt = fast_app(static_path="src")


# ----- Content data translated from InteractiveGuide.tsx -----

ACTIONS = [
    {
        "category": "Individual Action",
        "items": [
            "Start a community garden in your neighborhood",
            "Share skills through free workshops or teach-ins",
            "Create or join a repair café to extend product lifespans",
            "Practice conscious consumption and local purchasing",
            "Organize neighborhood care networks",
        ],
    },
    {
        "category": "Community Organizing",
        "items": [
            "Form a tenants union or housing cooperative",
            "Start a time bank or skill-sharing network",
            "Create community-owned renewable energy projects",
            "Establish participatory budgeting in your area",
            "Build local food systems and distribution networks",
        ],
    },
    {
        "category": "Institutional Change",
        "items": [
            "Advocate for worker cooperatives and employee ownership",
            "Push for circular economy policies in local government",
            "Support community land trusts and affordable housing",
            "Promote regenerative agriculture and local food policy",
            "Work toward democratic control of essential services",
        ],
    },
    {
        "category": "Economic Alternatives",
        "items": [
            "Support or create mutual aid networks",
            "Join or start a credit union or community bank",
            "Participate in local currencies and exchange systems",
            "Build solidarity economy enterprises",
            "Invest in community-controlled assets",
        ],
    },
]


# ----- Layout primitives -----


def base_layout(title: str, *body_children) -> FT:
    """Base HTML layout roughly mirroring Layout.astro."""
    return Html(
        Head(
            Meta(charset="UTF-8"),
            Meta(name="viewport", content="width=device-width"),
            Link(rel="icon", type="image/svg+xml", href="/favicon.svg"),
            Title(title),
            # Use Tailwind via CDN so existing utility classes work.
            Script(src="https://cdn.tailwindcss.com"),
        ),
        Body(
            Div(
                *body_children,
                cls="min-h-screen bg-white text-black",
            )
        ),
    )


def logo() -> FT:
    """Logo derived from Logo.tsx."""
    return Div(
        Img(
            src="/assets/28ed59953e4b23b962418acb3b6c42201071a521.png",
            alt="SundRoot Logo",
            cls="w-64 h-auto",
        ),
        cls="flex items-center justify-center mb-8",
    )


def video_card(title: str, description: str, url: Optional[str] = None) -> FT:
    """Card equivalent to VideoCard.tsx."""
    content: list[FT] = [
        Div(
            Svg(
                Path(
                    d=(
                        "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263"
                        "a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
                    ),
                    strokeLinecap="round",
                    strokeLinejoin="round",
                    strokeWidth="2",
                ),
                Path(
                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
                    strokeLinecap="round",
                    strokeLinejoin="round",
                    strokeWidth="2",
                ),
                fill="none",
                stroke="currentColor",
                viewBox="0 0 24 24",
                cls="w-16 h-16 opacity-30",
            ),
            cls="aspect-video bg-black/5 mb-6 flex items-center justify-center",
        ),
        H3(title, cls="text-2xl mb-4"),
        P(description, cls="opacity-70 leading-relaxed"),
    ]
    if url:
        content.append(
            A(
                "Watch video →",
                href=url,
                target="_blank",
                rel="noopener noreferrer",
                cls="inline-block mt-4 underline hover:opacity-70 transition-opacity",
            )
        )
    return Div(*content, cls="min-w-[400px] border-2 border-black p-8")


def example_card(title: str, location: str, description: str) -> FT:
    """Card equivalent to ExampleCard.tsx."""
    return Div(
        Div(location, cls="mb-4 opacity-60 text-lg"),
        H3(title, cls="text-3xl mb-6"),
        P(description, cls="leading-relaxed opacity-70"),
        cls="min-w-[450px] border-2 border-black p-10 snap-center",
    )


def interactive_guide(selected_category: Optional[str]) -> FT:
    """Interactive guide implemented with a small client-side toggle script.

    The selected_category argument is kept for compatibility but is not used;
    all behavior is handled client-side so clicks do not reload or scroll.
    """
    cards: list[FT] = []
    panels: list[FT] = []

    base_classes = (
        "border-2 border-black p-8 text-left transition-all "
        "hover:bg-black hover:text-white bg-white text-black cursor-pointer"
    )

    for idx, action in enumerate(ACTIONS):
        category = action["category"]

        # Card representing a category
        cards.append(
            Div(
                H3(category, cls="text-2xl mb-2"),
                P("Click to explore actions", cls="opacity-70"),
                cls=f"{base_classes} guide-card card-{idx}",
            )
        )

        # Panel with detailed items for this category (hidden by default)
        items = [
            Li(
                Span(
                    str(item_idx + 1),
                    cls=(
                        "inline-block w-8 h-8 border-2 border-black rounded-full "
                        "flex-shrink-0 flex items-center justify-center mt-1"
                    ),
                ),
                Span(item),
                cls="flex items-start gap-4 text-xl leading-relaxed",
            )
            for item_idx, item in enumerate(action["items"])
        ]

        panels.append(
            Div(
                H3(category, cls="text-3xl mb-8"),
                Ul(*items, cls="space-y-6"),
                cls=(
                    "guide-panel panel-{} border-2 border-black p-12 "
                    "bg-white hidden"
                ).format(idx),
            )
        )

    return Div(
        Div(*cards, cls="grid md:grid-cols-2 gap-6 mb-12"),
        Div(*panels, cls="space-y-6"),
        cls="max-w-5xl mx-auto",
    )


# ----- Page sections translated from index.astro -----


def hero_section() -> FT:
    return Div(
        Div(
            logo(),
            H1(
                "How do we weave life nurturing social fabric?",
                cls="text-6xl leading-tight tracking-tight mb-8",
            ),
            cls="max-w-4xl mx-auto text-center",
        ),
        cls="py-24 px-8",
    )


def systems_map_section() -> FT:
    return Div(
        Div(
            H2(
                "Map Navigation From Extractive To Regenerative.",
                cls="text-5xl mb-16 text-center",
            ),
            Div(
                H3(
                    (
                        "From currently dominant extractive system to "
                        "sought-after Regenerative Systems"
                    ),
                    cls="text-3xl mb-8 text-center opacity-70",
                ),
                Div(
                    # Use raw HTML for the iframe embed to avoid guessing
                    # at the exact FastHTML tag helper for <iframe>.
                    NotStr(
                        """
<div class="w-full border-2 border-black">
  <iframe
    src="https://miro.com/app/live-embed/uXjVJqiqqL0=/?embedMode=view_only_without_ui&moveToViewport=-3495,-361,5340,1672&embedId=95317395734"
    class="w-full h-[632px]"
    scrolling="no"
    allow="fullscreen; clipboard-read; clipboard-write"
    allowfullscreen
    title="Miro Board - Extractive to Regenerative Systems"
  ></iframe>
</div>
"""
                    ),
                    cls="mb-12",
                ),
            ),
            cls="max-w-6xl mx-auto",
        ),
        cls="py-24 px-8 border-t-2 border-black",
    )


def educational_references_section() -> FT:
    cards = Div(
        video_card(
            "Introduction to Regenerative Systems",
            "Explore the foundational principles of regenerative design and how they differ from extractive models.",
        ),
        video_card(
            "Community-Led Change",
            "Learn from communities around the world who have successfully transitioned to regenerative practices.",
        ),
        video_card(
            "Systems Thinking Fundamentals",
            "Understand the interconnections between social, economic, and ecological systems.",
        ),
        cls="flex gap-8 overflow-x-auto pb-4 snap-x snap-mandatory",
    )

    notion_embed = Div(
        NotStr(
            """
<div class="w-full border-2 border-black mt-16">
  <iframe
    src="https://axosal.notion.site/ebd//318caf66d9898011866ff6a8a10a51a9?v=318caf66d98980f88aeb000c707d947a"
    class="w-full h-[600px]"
    allowfullscreen
    title="Educational Resources Regenerative Cooperative Societies & Systems"
  ></iframe>
</div>
"""
        )
    )

    return Div(
        Div(
            H2("Educational References", cls="text-4xl mb-16 text-center"),
            cards,
            notion_embed,
            cls="max-w-6xl mx-auto",
        ),
        cls="py-24 px-8",
    )


def examples_section() -> FT:
    examples_row = Div(
        example_card(
            "Mondragon Cooperative",
            "Basque Country, Spain",
            (
                "Worker-owned cooperative federation demonstrating democratic "
                "workplace organization and community wealth building."
            ),
        ),
        example_card(
            "Participatory Budgeting",
            "Porto Alegre, Brazil",
            (
                "Citizens directly deciding how to allocate public funds, "
                "creating more equitable and responsive governance."
            ),
        ),
        example_card(
            "Transition Towns",
            "Totnes, UK",
            (
                "Community-led response to climate change and economic "
                "uncertainty through local resilience building."
            ),
        ),
        example_card(
            "Community Land Trusts",
            "Burlington, USA",
            (
                "Democratic land ownership models ensuring permanent "
                "affordable housing and community control."
            ),
        ),
        cls=(
            "flex gap-8 overflow-x-auto pb-4 snap-x snap-mandatory mb-16"
        ),
    )

    notion_db_embed = Div(
        NotStr(
            """
<div class="w-full h-[600px] border-2 border-black">
  <iframe
    src="https://axosal.notion.site/ebd//318caf66d98980a481add26146221565?v=318caf66d98980fd8095000c2e240a8c"
    class="w-full h-full"
    title="Regenerative Initiatives Database"
  ></iframe>
</div>
"""
        ),
        cls="text-center",
    )

    return Div(
        Div(
            H2(
                "Proven Examples Around the World",
                cls="text-5xl mb-16 text-center",
            ),
            examples_row,
            notion_db_embed,
            cls="max-w-7xl mx-auto",
        ),
        cls="py-24 px-8 border-t-2 border-black",
    )


def quote_section() -> FT:
    return Div(
        Div(
            Blockquote(
                P(
                    (
                        "Ask yourselves - what initiatives do shift the "
                        "paradigms into decentralized power, broad "
                        "ownership, shared benefit and incentive structures "
                        "aligned with socio-ecological effects..."
                    ),
                    cls="text-3xl leading-relaxed mb-8",
                ),
                P(
                    (
                        "Ask yourselves - What initiatives do shift us into "
                        "self-sustaining mechanisms for regenerative "
                        "growing and what initiatives keep us dependant on "
                        "extractive system?"
                    ),
                    cls="text-3xl leading-relaxed",
                ),
                cls="border-l-4 border-black pl-12 py-6",
            ),
            cls="max-w-4xl mx-auto",
        ),
        cls="py-20 px-8",
    )


def malmo_section() -> FT:
    return Div(
        Div(
            H2(
                "Malmö, Sweden: A Case of Applying Systems Change",
                cls="text-4xl mb-8 text-center",
            ),
            P(
                (
                    "Exploring directions Malmö can implement to "
                    "practically apply regenerative systems thinking to "
                    "transform urban development and community engagement."
                ),
                cls=(
                    "text-xl text-center opacity-70 mb-16 max-w-3xl mx-auto "
                    "leading-relaxed"
                ),
            ),
            Div(
                NotStr(
                    """
<div class="w-full border-2 border-black">
  <iframe
    src="https://embed.kumu.io/7677a4b1afe04cdb6680f03f1988f3d9"
    class="w-full h-[600px]"
    title="Kumu Board - Malmö Systems Change"
  ></iframe>
</div>
"""
                ),
                cls="w-full border-2 border-black",
            ),
            cls="max-w-6xl mx-auto",
        ),
        cls="py-24 px-8",
    )


def contribute_section(selected_category: Optional[str]) -> FT:
    return Div(
        Div(
            H2(
                "Contribute to the Shift",
                cls="text-5xl mb-8 text-center",
            ),
            P(
                "Where you are, with what you have.",
                cls=(
                    "text-2xl text-center opacity-70 mb-20 max-w-3xl mx-auto "
                    "leading-relaxed"
                ),
            ),
            interactive_guide(selected_category),
            Script(
                NotStr(
                    """
(function () {
  const cards = document.querySelectorAll('.guide-card');
  const panels = document.querySelectorAll('.guide-panel');

  function clearSelection() {
    cards.forEach((card) => {
      card.classList.remove('bg-black', 'text-white');
      card.classList.add('bg-white', 'text-black');
    });
    panels.forEach((panel) => {
      panel.classList.add('hidden');
    });
  }

  cards.forEach((card) => {
    card.addEventListener('click', (event) => {
      event.preventDefault();

      const keyClass = Array.from(card.classList).find((cls) =>
        cls.startsWith('card-')
      );
      if (!keyClass) return;

      const idx = keyClass.replace('card-', '');
      const panel = document.querySelector('.panel-' + idx);
      if (!panel) return;

      const isOpen = !panel.classList.contains('hidden');
      clearSelection();

      if (!isOpen) {
        card.classList.remove('bg-white', 'text-black');
        card.classList.add('bg-black', 'text-white');
        panel.classList.remove('hidden');
      }
    });
  });
})();
"""
                )
            ),
            cls="max-w-6xl mx-auto",
        ),
        cls="py-24 px-8 border-t-2 border-black",
    )


def footer_section() -> FT:
    return Div(
        Div(
            P(
                "SundRoot — Weaving life nurturing social fabric",
                cls="text-xl opacity-70",
            ),
            cls="max-w-6xl mx-auto text-center",
        ),
        cls="py-16 px-8 border-t-2 border-black",
    )


def sundroot_page(selected_category: Optional[str]) -> FT:
    """Compose the full SundRoot landing page."""
    return base_layout(
        "Minimalistic SundRoot Website",
        hero_section(),
        systems_map_section(),
        educational_references_section(),
        examples_section(),
        quote_section(),
        malmo_section(),
        contribute_section(selected_category),
        footer_section(),
    )


@rt("/")
def get(req) -> FT:
    """Main route: mirrors src/pages/index.astro."""
    selected_category = req.query_params.get("category") if hasattr(
        req, "query_params"
    ) else None
    return sundroot_page(selected_category)


if __name__ == "__main__":
    serve()